Controllo della viewport lato client

[Experiment8]

Ciao,

rispondo ai tuoi punti:

1) Probabilmente il browser desktop non riconosce i media queries perché utilizzi "max-device-width" anziché "max-width", ed anche l'orientation a mio avviso potrebbe provocare problemi sul desktop, anche se in realtà dovrebbe semplicemente ignorarlo. Il media query è scritto proprio così a codice: "all and (max-device-width: 480px) and (orientation: portrait), all and (max-device-height: 480px) and (orientation:landscape) "?
In secondo luogo il max-device-height (a mio avviso non corretto perché se uno ha uno smartphone più alto non vede il media query, solitamente è meglio lavorare solo in larghezza) potrebbe inibire il desktop dal visualizzarti la versione mobile semplicemente perché la finestra del browser non è alta meno di 480px;

2) Probabilmente il body è largo 320px, ma non tutti i box contenuti, cerca qualche box interno che ha una larghezza fissata oltre i 320px, sicuramente c'è qualche stile del layout a 980px che si ripercuote ancora sul layout mobile.

3) Se non puoi zoomare prova a controllare nel viewport che tu non abbia inserito user-scalable: 0, bloccherebbe il pinch-zoom su tablet. A tal proposito, tablet è un pò generico, ci sono 11, 10, 8, 9, 7 pollici con risoluzioni completamente diverse, prendo come riferimento l'iPad versione 10 pollici, l'iPad portrait ha si 980px di larghezza, ma il tuo layout deve essere leggermente minore perché le parti laterali potrebbero venire "mangiate", hai sempre bisogno di un 30px di spazio laterale a mio avviso.

Da quel che ho letto mi sembra tu stia lavorando su un template non concepito per essere responsive, il mio consiglio è di controllare e sistemare tutte le larghezze in pixel presenti e toglierle o sostituirle in percentuale ove possibile, purtroppo non si può prevedere ogni possibilità per cui è meglio avere un layout con poche dimensioni fisse e media queries poco selettive per arginare il più possibile problemi su device diversi (non esistono solo apple e desktop 1600x900);

Spero di esserti stato d'aiuto, se non sono stato chiaro su alcune cose fammi sapere.

[Shores]

Nel frattempo ho risolto ribaltando completamente la logica, ovvero partendo con un foglio di stile che crea la versione per smartphone, per attivare con la media query "all and (min-width: 481px) and (orientationortrait), all and (min-height: 481px) and (orientation:landscape)" la versione tablet/desktop solo quando il display è più largo/alto di 480px.

Tra le cose che ho scoperto, alcune sono assolutamente CONTROINTUITIVE:

a) @viewport semplicemente NON funziona, perlomeno non in modo affidabile, quindi è inutile!
b) meta viewport width=device-width NON significa che la viewport sia fissata alla larghezza in pixel css del display, ma significa invece che la larghezza MINIMA della viewport non è 980/800 px come succederebbe altrimenti, ma si riduce fino alla pixel width del display, potendo però anche aumentare se il layout fosse più largo: in pratica sto dicendo MIN-width=device-width!
c) inserendo la meta viewport width=device-width (senza nent'altro) NON ho più bisogno di dimensionare in px il layout per smartphone, ma è sufficiente width:100% per ottenere esattamente quello che volevo, ovvero scrolling solo verticale e niente spazi vuoti intorno al layout.

Ciao,

rispondo ai tuoi punti:

1) Probabilmente il browser desktop non riconosce i media queries perché utilizzi "max-device-width" anziché "max-width", ed anche l'orientation a mio avviso potrebbe provocare problemi sul desktop, anche se in realtà dovrebbe semplicemente ignorarlo. Il media query è scritto proprio così a codice: "all and (max-device-width: 480px) and (orientation: portrait), all and (max-device-height: 480px) and (orientation:landscape) "?
In secondo luogo il max-device-height (a mio avviso non corretto perché se uno ha uno smartphone più alto non vede il media query, solitamente è meglio lavorare solo in larghezza) potrebbe inibire il desktop dal visualizzarti la versione mobile semplicemente perché la finestra del browser non è alta meno di 480px;

Mmm, sul fatto che sul desktop device-width non funzioni ti do ragione, in effetti il ridimensionare la finestra non cambia la risoluzione dello schermo, ma l'orientation funziona correttamente anche sul desktop; invece, sul fatto che il mio uso di device-height (o height, il discoros non cambia) sia corretto, sono sicuro di avere ragione: quella media query significa che quando lo smartphone è in verticale va verificata la larghezza, mentre quando diventa in orizzontale va verificata l'altezza; infatti, quella media query mi seleziona il layout compatto sia quando lo smartphone è verticale che quando è orizzontale, mentre se ometto la regola con la height non appena il dispositivo viene messo orizzontale passa al layout per tablet, cosa che io non voglio (apple ha un bug in questo senso, e non scambia device-width con device-height quando il dispositivo ruota, ma gli android invece lo fanno e quindi la regola serve).

2) Probabilmente il body è largo 320px, ma non tutti i box contenuti, cerca qualche box interno che ha una larghezza fissata oltre i 320px, sicuramente c'è qualche stile del layout a 980px che si ripercuote ancora sul layout mobile.

No, sono assolutamente certo che non ci fosse nulla di più ampio dei 320px, ma comunque la nuova strategia non mi obbliga più ad esplicitare la larghezza, quindi non me ne preoccupo più.

3) Se non puoi zoomare prova a controllare nel viewport che tu non abbia inserito user-scalable: 0, bloccherebbe il pinch-zoom su tablet. A tal proposito, tablet è un pò generico, ci sono 11, 10, 8, 9, 7 pollici con risoluzioni completamente diverse, prendo come riferimento l'iPad versione 10 pollici, l'iPad portrait ha si 980px di larghezza, ma il tuo layout deve essere leggermente minore perché le parti laterali potrebbero venire "mangiate", hai sempre bisogno di un 30px di spazio laterale a mio avviso.

Di nuovo, no, non c'era nessun user-scalable=0, ma solo un initial-scale=1, che però era sufficiente per inibire lo zoom out (aveva lo stesso effetto che un min-scale=1), impedendomi di vedere le due fette ai lati. Il mio layout comunque era già più stretto di 980 (circa 960), ciò nonostante la parte visibile era circa 800 px. Quanto alle diverse risoluzioni dei tablet, certo, ma poco mi importa: qualunque risoluzione superiore a quella dello smartphone vedrà la versione desktop del sito, quindi...

Da quel che ho letto mi sembra tu stia lavorando su un template non concepito per essere responsive, il mio consiglio è di controllare e sistemare tutte le larghezze in pixel presenti e toglierle o sostituirle in percentuale ove possibile, purtroppo non si può prevedere ogni possibilità per cui è meglio avere un layout con poche dimensioni fisse e media queries poco selettive per arginare il più possibile problemi su device diversi (non esistono solo apple e desktop 1600x900);

Spero di esserti stato d'aiuto, se non sono stato chiaro su alcune cose fammi sapere.

Non sto lavorando su un template responsive, semplicemente perchè NON sto lavorando su un template, visto che sono io lo sviluppatore frontend,backend,css (tutti scritti a mano da zero dal sottoscritto) tranne la grafica, e appunto, quello che voglio è SOLO che su smartphone il sito si veda COMPLETAMENTE diverso, e non che il sito desktop si trasformi gradatamente in uno per smartphone. Per darti l'idea, non solo l'aspetto è differente, ma non saranno nemmeno presenti gli stessi menu/comandi, sostituiti da un menu assai semplificato che permetta di fare in modo rapido le sole operazioni che davvero ha senso fare in mobilità.

Infatti sono convinto che tutti i dispositivi che hanno uno schermo da almeno 7 pollici possano tranquillamente e proficuamente usare direttamente la versione desktop, che è tutta pixel based e funziona benissimo, mentre coloro che davvero vogliono usare il sito su schermi più piccoli lo facciano perché ne hanno necessità, e quindi vogliano semplicemente avere l'accesso più comodo possibile alle funzionalità, e non sappiano che farserne di fronzoli visivi che fanno solo perdere tempo!

Grazie in ogni caso del tuo intervento!