- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- Semplice media querie per smartphone e initial-scale
-
Semplice media querie per smartphone e initial-scale
Ciao!!
Ho una pagina molto semplice con 1 colonna fissa (1200px circa) centrata.
Sugli smartphone vorrei semplicemente che la pagina venisse visualizzata INTERAMENTE per tutta la sua larghezza (ovvero rimpicciolita, poi l'utente la ingrandirà a piacimento).
Inoltre vorrei solamente nascondere due div contenenti del testo che sono superflui nella navigazione mobile.
Ho già creato anche una versione della pagina a 960px, di cui probabilmente userò il css nelle media queries.
[Lo so che di norma bisognerebbe creare una versione responsive dedicata agli schermi più piccoli, ma in questo caso è un'esigenza particolare].Ho provato ad inserire questa semplice media querie ma non funziona. Chiedo aiuto a voi.
Di seguito il codice che ho usato nella sezione head.
[HTML]
<meta name="viewport" content="width=device-width, initial-scale=1.0" /><style> @media (max-width: 600px) { #div1 { display: none;} #div2 {display: none;} }</style>[/HTML]
Ecco cosa accade sullo smartphone:
- senza media querie la pagina da 1200px viene visualizzata quasi tutta; la pagina da 960px invece è perfetta (sia in vista portrait che landscape viene rimpicciolita automaticamente)
- con la media querie sopra indicata, i due div scompaiono (come desiderato) tuttavia la pagina non viene più zoomata/rimpicciolita ma viene invece resa in scala 1:1. Anche cancellando "initial-scale=1" il risultato è identico.
Riassumendo io vorrei fare questo:
- pagina originale da 1200px circa
- media querie per pagina da 960px
- media querie per smartphone che (mantenendo il layout identico a 960px) nasconde 2 div e fa visualizzare la pagina in tutta la sua larghezza sul telefono (regolando lo zoom di conseguenza)