Come posso disabilitare il contenuto di MobileSafari durante il cambio di orientamento?

Sto facendo una versione mobile del mio sito supporto applicativo e ho un piccolo problema WebKit/iOS/HTML/CSS qui ...Come posso disabilitare il contenuto di MobileSafari durante il cambio di orientamento?

ho una pagina, index.php, con mobile.css file allegato. Nel mio tag <head> ho:

<meta name="viewport" content="width=device-width, user-scalable=no, max-scale=1.0" />

miei body 's css:

body { 
    font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue","Helvetica","Lucida Grande",Verdana,Arial,sans-serif; 
    margin: 0; 
    background: url(../../images/textured_bg.png) repeat; 
    color:#454545; 
    font-size: 14px; 
    text-shadow: rgba(255, 255, 255, 0.5) 0 1px; 
    width:100%; 
}

Tutto funziona bene in orientamento verticale, ma quando ho ruotare il mio iPhone in orizzontale, Safari scale il mio contenuto in modo che appaia come nel ritratto, ma un po 'più grande:

enter image description here

la mia domanda: c'è un modo, senza 012.348.648.295., per imporre a Safari di non scalare il mio contenuto?

fonte

2011-08-18 akashivskyy

Non ho un iphone, ma questo comportamento normale è per il telefono? Un utente si aspetterebbe che il contenuto venga ridimensionato al passaggio dell'orientamento? – Jrod

Forse, ma non voglio che il mio contenuto venga ridimensionato, perché le mie immagini vengono pixelate. PS: ci sono alcuni siti che non scalano il loro contenuto, ad es. StackOverflow: http://cl.ly/0o0t2N2225063T2N2E05 – akashivskyy

Se il problema è rappresentato dalle immagini pixelate, potresti prendere in considerazione l'utilizzo di svg. – Ludder

Probabilmente si vorrà usare il tag <meta name="viewport" .../> (vedere MDN docs e Safari Web Content Guide). Il layout cellulare Stack Exchange utilizza questo:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" />

fonte

2011-08-18 20:02:12 jtbandes

Ho usato le virgole (',') invece del punto e virgola (';') ... Mi vergognano ... – akashivskyy

MDN dice "usa virgole", dice la virgola. Sembra che entrambi possano usare il punto e virgola, comunque. –

La parte chiave per la risoluzione di questo non è il metatag viewport (anche se questo è importante, troppo, ma per ragioni diverse). Ecco la magia che corregge le dimensioni del testo sul cambiamento di orientamento.

html { 
    -webkit-text-size-adjust: 100%; 
    -ms-text-size-adjust: 100%; 
}

(. Ho ricevuto questo da file CSS mobile di StackExchange)

fonte

2011-09-01 17:11:05

Penso che questa sia la migliore risposta. La disabilitazione del ridimensionamento degli utenti non è molto intuitiva. Per maggiori informazioni vedi http://www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ –

Questo non funziona se un input di testo è focalizzato mentre "onorientationchange" si attiva. Vedi una [demo qui] (https://idorecall.com/static/bug-demos/mobile-safari-content-scaling-on-rotation-in-input/). –

ho provato le virgole, non ha funzionato - allora virgola provato, che ha funzionato. iPod touch, iOS 4.2

fonte

2012-03-27 21:58:39 tim

Come posso disabilitare il contenuto di MobileSafari durante il cambio di orientamento?

risposta

Problemi correlati