Sito autoadattante alla risoluzione dei dispositivi mobili

**spinubai** · 11-07-2008, 15:24

Ciao a tutti, spero mi possiate aiutare, ci sto diventando matto con questa cosa:

www.coin.mobi

Se aprite il sito con un browser normale vedrete semplicemente una pagina piena di DIV uno sotto l'altro, raggruppata molto piccola in alto a sinistra.

Sbirciando il codice sorgente vedrete che l'intestazione riporta

codice:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

C'è un foglio di stile allegato ma non specifica da nessuna parte dimensioni dei DIV o della pagina.
Non c'è nessun javascript.

Cosa c'è di strano? Ebbene, il mistero è questo:

Se aprite il sito da un cellulare/palmare/iPhone, la pagina risulterà essere grande esattamente come lo schermo!

"Eh beh!", direte voi, "che domanda è? Ovvio, il dispositivo adatta la pagina alla propria risoluzione!".
Invece non è proprio così: l'iPod touch che uso non adatta la risoluzione della pagina alla propria risoluzione, perché possiede uno zoom tramite multitouch. Il browser visualizza sempre le pagine dei vari siti in una dimensione di 1024x768 (più o meno). Poi sono io che scelgo di ingrandire la parte che mi interessa con le dita. In pratica vedo i siti web esattamente come li vedrei con Safari da PC.

Ma invece, quando accedo al sito coin.mobi da iPod Touch, questo non avviene!! La pagina contiene immagini da 320px di larghezza che vengono visualizzate fino a riempire la pagina.

Ho provato a copiare ogni file della home di coin.mobi e metterli in un altro spazio web, un semplice copia-incolla di tutta la home: niente da fare. Il sito viene visualizzato in risoluzione più alta, e quindi viene visualizzato piccolo e devo ingrandirlo per vederlo.

Siccome non utilizza javascript né ci sono istruzioni speciali nel css, la mia domanda è questa:

come diavolo fa??? Usa qualche direttiva nell'header html? Magari tramite un comando tipo header(); del PHP?

Qualcuno mi sa aiutare??????

**SkedO** · 14-07-2008, 13:16

Originariamente inviato da spinubai

Ma invece, quando accedo al sito coin.mobi da iPod Touch, questo non avviene!! La pagina contiene immagini da 320px di larghezza che vengono visualizzate fino a riempire la pagina.

Ho provato a copiare ogni file della home di coin.mobi e metterli in un altro spazio web, un semplice copia-incolla di tutta la home: niente da fare. Il sito viene visualizzato in risoluzione più alta, e quindi viene visualizzato piccolo e devo ingrandirlo per vederlo.

Siccome non utilizza javascript né ci sono istruzioni speciali nel css, la mia domanda è questa:

come diavolo fa??? Usa qualche direttiva nell'header html? Magari tramite un comando tipo header(); del PHP?

Qualcuno mi sa aiutare??????

In realtà non so bene come riesca a farlo, però credo che utilizzi PHP + GD2, quindi è capace di ridimensionare le immagini a seconda del dispositivo, ovviamente poi con grande stile

codice:

[img]images/resized/194/logocoin.gif[/img]

Aprendo con il mio broswer si nota come 194 siano i pixel di larghezza dell'immagine..e quel resized parli da solo.
Tu non vedi nulla, secondo me, perchè quando accedi al sito mobi, vieni catapultato a http://www.[..].mobi/msite/index.html che è pulitissimo.

L'unica cosa che mi viene in mente, è che utilizzi PHP* per cavar fuori le informazioni, le passi alla GD2 che ridimensiona le immagini; dato che tutto è in percentuale (credo) o comunque fluido, si dimensiona tutto senza problemi.

Geniacci..

* E non sono davvero sicuro che PHP riesca in ciò..

**spinubai** · 14-07-2008, 13:35

Quello che hai detto è corretto, il mio problema però non è ridimensionare le immagini, ma fare in modo che la pagina venga visualizzata senza le barre di scorrimento.

Ho provato anche a copiare-incollare tutta la home page coin.mobi in un altro spazio web, ma non c'è niente da fare, vedo le barre di scorrimento!

Anche se le mie immagini sono ridimensionate a 194px, il browser dell'iPod mi visualizza comunque le barre di scorrimento come se avesse aperto la pagina con larghezza 1024 pixel.

Nel sito coin.mobi, invece, questo non succede. E' pazzesco, non capisco come diavolo faccia! Sicuramente è qualche sotterfugio lato server, ma quale???

E' come se il browser sapesse, al momento dell'apertura del sito, che la larghezza massima della pagina è di 200px!

Ecco un articolo che presenta il sito coin.mobi (link):

Il nuovo sito internet [coin.mobi] utilizza una tecnologia all’avanguardia che permette di riconoscere il tipo di risoluzione e dimensione dello schermo del telefonino dal quale ci si connette e di adattare l’aspetto del sito modificando le dimensione delle immagini e l’impaginazione dei testi, in modo da garantire sempre una perfetta visualizzazione.

**SkedO** · 14-07-2008, 14:21

Aspetto un Guru..

E intanto elaboro.. :ignore:

**Vincent.Zeno** · 14-07-2008, 16:48

e se fosse un problema del tuo browser...?
perché se guardiamo il CSS c'è un'unica misura per la larghezza: table {width:100%;}
(dimensione img a parte)

**spinubai** · 14-07-2008, 16:53

Assicurato che non è un problema di browser. D'altronde con il copia-incolla di un sito come potrebbe essere?
La stessa cosa copiata-incollata non si vede allo stesso modo.
Stesso XHTML, stesso CSS, stesse immagini.

Sono sempre più convinto che sia qualcosa lato server specificato nell'header della risposta HTML... Insomma deve essere per forza qualche istruzione che "non si vede"!

**Vincent.Zeno** · 14-07-2008, 17:02

Originariamente inviato da spinubai
Sono sempre più convinto che sia qualcosa lato server specificato nell'header della risposta HTML... Insomma deve essere per forza qualche istruzione che "non si vede"!

allora... adesso non lo vedo più, ma fino a un paio di accessi fa mi appariva un indirizzo tipo
[*url]http://www.coin.mobi/msite/index.html:jssessionoid-ALJGHRòHSBNòUIBN:QUALCOSA...[/url]

quindi si, e possibile che fosse restituito qualcosa in base al tipo di risoluzione...

**spinubai** · 14-07-2008, 17:13

A parte il riconoscimento della risoluzione, che viene rilevata in qualche modo a lato server, quello che mi preme è capire come comunicare al browser la larghezza (in pixel) che deve occupare la pagina.

Deve essere qualcosa che viene comunicato tramite l'header HTTP di risposta, un po' come quando vuoi far scaricare un file dal browser piuttosto che visualizzarlo. Ad esempio, in PHP:

Codice PHP:


header('Content-type: Application/octet-stream');

Capito cosa intendo? Credo che ci debba essere una istruzione tipo:

Codice PHP:


header('Page-width: 200px');

C'è qualcuno espertissimo di protocolli?

**spinubai** · 14-07-2008, 17:56

Rivelazione!

Incredibilmente ho scoperto quello che fa la differenza: l'estensione .mobi del dominio.

Per tutti i siti che visito con estensione .mobi, il browser dell'iPod (safari) disabilita lo scrolling a meno che si scelga volontariamente di ingrandire la pagina, supponendo a priori che sia un sito ottimizzato per basse risoluzioni. Questo SOLO con i domini che si concludono con .mobi.

Alla faccia della tecnologia supersofisticata e del bla bla bla: il sito coin.mobi è semplicemente un sito in cui nessun elemento supera i 200px di larghezza, questo fa si che sia visibile in maniera perfetta da qualsiasi cellulare/palmare.

E io che mi scervellavo per niente. Grazie Coin per la grande pubblicità che ti sei fatta...

Invece grazie mille (non sarcastico questa volta!) per il vostro aiuto, scusate il falso allarme!!!

**Vincent.Zeno** · 14-07-2008, 18:13

grazie a te, spinubai, per queste informazioni

tornaranno senz'altro utili

Discussione: Sito autoadattante alla risoluzione dei dispositivi mobili

Strumenti discussione

Ricerca discussione

Visualizza

Sito autoadattante alla risoluzione dei dispositivi mobili

Re: Sito autoadattante alla risoluzione dei dispositivi mobili

Permessi di invio