Ciao a tutti.
Sono in questa situazione: ho un sito web per il quale ho preparato due diversi CSS, uno nel quale il layout utilizza una larghezza fissa di circa 980px, che vorrei usare su pc e tablet, che hanno lo spazio a schermo sufficiente per mostrarlo, ed uno assai semplificato, a sviluppo verticale, largo solo 320px che vorrei venisse usato sugli smartphone.
Sto sperimentando con le media queries, e in effetti riesco a selezionare le due situazioni usando queste due media query:
Di default layout a 980px.
Selezione degli smartphone con larghezza o altezza inferiore a 480px:
all and (max-device-width: 480px) and (orientation: portrait), all and (max-device-height: 480px) and (orientation:landscape)
Ho però alcuni problemi, visto che succedono alcune cose che non mi tornano:
1) La media query, nonostante non comprenda handheld, non sembra agire sui browser desktop, e non capisco poi tanto perché... o forse questo è dovuto al fatto che device-width non esiste/non varia al variare della dimensione della finestra del browser?
2) Andando sullo smartphone quel che succede è che la media query viene correttamente attivata, tanto che il mio body diventa largo 320px, ma il browser continua a considerare la pagina come molto più grande, e mi mostra un sacco di inutile spazio vuoto intorno, senza contare che, quindi, mi permette di fare scroll in aree del tutto vuote...
Con un po' di studio, ho capito che mi poteva aiutare il meta tag viewport, ed ho provato ad aggiungerlo: width=device-width, initial-scale=1 ...
Solo che, ora che lo smartphone è ok, il tablet invece no:
3) Andando sul tablet, che in effetti come dovrebbe mi mostra la versione da 980px, ho però il problema che in modalità portrait due piccole fettine ai lati del layout vengono tagliate via, e non c'è nessun modo di zoomare o scrollare per vederle: l'inserimento del meta viewport mi blocca fuori da quelle due piccole fasce laterali...
Tra l'altro, in ogni caso, dover usare il meta viewport non mi piace, perché è una decisione lato server su un qualcosa, il layout scelto, che dovrebbe essere lato client.
Ho anche provato ad usare, nello stile per lo smartphone:
@viewport{width:320px;}
ma non ottengo esattamente quel che vorrei, perché la visualizzazione parte con lo zoom corretto, ma comunque la pagina sottostante è molto più larga del necessario, e quindi il problema di poter scrollare in aree del tutto vuote rimane...
Ogni idea è la benvenuta!
Rispondi quotando
ortrait), all and (min-height: 481px) and (orientation:landscape)" la versione tablet/desktop solo quando il display è più largo/alto di 480px.
Originariamente inviata da Experiment8
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à.
