• S
    User •

    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)
    0
Effettua l'accesso per rispondere