Android ignora la scala massima quando si utilizza il metatag di viewport a larghezza fissa

Ho una pagina web a larghezza fissa (larghezza 640 pixel). Mi piacerebbe che questa pagina si restringesse alla larghezza di un dispositivo mobile. Tuttavia, se la larghezza nativa del dispositivo è maggiore di 640 pixel, non voglio che venga allungata. Sembra abbastanza semplice:Android ignora la scala massima quando si utilizza il metatag di viewport a larghezza fissa

<meta name="viewport" content="width=640, maximum-scale=1.0" />

Funziona come previsto in iPad/iPhone. Tuttavia, su un tablet Android (ad esempio in modalità orizzontale), il contenuto viene ridimensionato per adattarsi al display. In altre parole, Android sta semplicemente ignorando la scala massima = 1. È possibile visualizzare una pagina di esempio con il problema here. Per ragioni di completezza qui è la fonte:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title>Test Viewport</title> 
    <meta name="viewport" content="width=640, maximum-scale=1.0" /> 
    <style> 
     div.bar { 
     position: absolute; 
     width: 636px; 
     height: 50px; 
     background-color: yellow; 
     border: 2px solid black; 
     left: 50%; 
     margin-left: -320px; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="bar"> 
    </div> 
    </body> 
</html>

Ho fatto un sacco di ricerca e sperimentazione con la finestra meta-tag. Ho letto quasi tutto sull'argomento, ma non ho visto questo problema apparentemente di base menzionato.

Due note:

Questo non è un obiettivo a densitydpi problema
Impostare la larghezza di finestra per device-width non è utile in questo caso perché la larghezza del contenuto è fisso e più grande di (ad esempio) la larghezza del dispositivo verticale del telefono. Se imposto width = device-width, la pagina non verrà ridimensionata automaticamente per adattarsi al telefono ..

Grazie mille.

fonte

2011-11-29 logidelic

Dopo più sbattere la testa contro un tavolo, ho trovato una soluzione:

Purtroppo sembra che iOS e Android semplicemente comportano in modo diverso (Android è molto chiaramente non fare quello che le specifiche dice ignorando massima scala) . La soluzione è quella di specializzarsi in base alla risoluzione utilizzando JavaScript:

Se la larghezza dello schermo (vedi nota sotto) è maggiore o uguale alla larghezza della pagina fissa (640 nel mio esempio), quindi impostare la meta viewport larghezza del contenuto del tag alla larghezza dello schermo
Else impostato larghezza del contenuto della finestra del meta-tag per la larghezza della pagina fissa (640)

Presto. Zoppo che richiede la specializzazione JavaScript, ma tale è la vita.

Si noti che il Javascript screen.width su iPad/iPhone non è corretta se il dispositivo è in modalità paesaggio (l'iPad segnala ancora la larghezza verticale anziché la larghezza di paesaggio, a differenza di Android, che ottiene il diritto in questo caso!) . Pertanto, è necessario controllare window.orientation su iPad/iPhone e utilizzare screen.height anziché screen.width se si è in orizzontale.

fonte

2011-11-30 19:15:52 logidelic

Questo sembra fantastico perché sto avendo una sorta di stesso problema con Android. Se dovessi provare a implementare questo, c'è un posto dove posso andare per ottenere lo script di base? Siccome non sono programmatore e non sono esperto in Javascript .. – kia4567

@logidelic per favore pubblica lo script che hai usato in modo che altri possano risolvere lo stesso problema per favore – user2190488

Preferisco utilizzare

width=640, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi

Invece di solo la proprietà Max scala ... La proprietà target-densityDpi è specifica per Android, forse può risolvere il tuo problema.

fonte

2011-11-30 23:11:23 ChristopheCVB

Non sono sicuro di cosa intendi con "Preferirei usarlo", ma questo non affronta il problema. – logidelic

Non funziona su Android. Non è possibile adattare contenuti su Android come è possibile su iPhone ... OP è giusto. – Miro

quanto sopra disabilita lo zoom sul mio androide – user2190488

Android ignora la scala massima quando si utilizza il metatag di viewport a larghezza fissa

risposta

Problemi correlati