Galaxy Nexus Ignora il meta tag viewport

Sto costruendo un'app PhoneGap. La mia app è progettata come interfaccia 320px. Il mio tag viewport all'interno della app è:Galaxy Nexus Ignora il meta tag viewport

<meta name="viewport" content="width=320, initial-scale=0.5, maximum-scale=0.5, user-scalable=no"/>

Questo funziona come previsto sul mio Galaxy S2 in esecuzione Ice Cream Sandwich. L'interfaccia 320px riempie l'intera larghezza dello schermo.

Tuttavia, quando si prova il codice sopra su un Galaxy Nexus, il viewport è largo 360 px. Quindi i miei elementi non riempiono lo schermo. Ho provato ad aggiungere la seguente riga al mio file appname.java di Cordova:

this.appView.getSettings().setUseWideViewPort(true);

Tuttavia, questo non ha alcun effetto.

fonte

2012-12-03 Brandon Tooke

Nella tua finestra, content = "width = 320" si prega di cambiare questo per width = device-width – thomasbabuj

provare a sostituire con questo:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Occorre ridimensionare al dispositivo specifico, ma non riesco a provare questo.

fonte

2012-12-15 11:44:56 Wayneio

I secondo quello che ha detto Wayneio - L'ho usato in un'app PhoneGap che ora è su Google Play e si ridimensiona per ogni dispositivo. Inoltre, per rispondere all'ultima domanda nella munificenza; no, hai solo bisogno di un file CSS. – Greg

Anch'io ho usato questo nelle mie app basate su phonegap/cordova e ne ho pubblicati più di 50. Uso un approccio leggermente diverso anche se aggiungo 'user-scalable = no' alla meta della viewport. Questo dovrebbe davvero fare il trucco per te. – mason81

Le risposte che vedo sono super vicine ma ignorano un punto che ha sollevato: la sua interfaccia è progettata per 320 px. width = device-width lo renderà adatto allo schermo, ma ciò non garantisce che la sua interfaccia rimarrà a 320px.

La mia soluzione si limita a costruire un po 'la risposta di Wayneio, fornendo il codice CSS/markup necessario per garantire che sia necessario un solo foglio di stile (e che non sia necessario uno responsivo).

<html> 
<head> 
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> 
</head> 
<body> 
    <div id="interfaceWrap"> 
     // insert interface here 
    </div> 
</body> 
</html>

Quello che fa è markup consente di limitare l'interfaccia a un contenitore specifico che è possibile impostare le proprietà per tramite CSS. Quello che mi sento di raccomandare è qualcosa di simile:

#interfaceWrap { 
    position: relative; 
    width: 320px; 
    margin-left: auto; 
    margin-right: auto; 
}

Questo dice in sostanza il browser che non importa meta-tag viewport imposta la larghezza della pagina a, mettere la mia interfaccia nel centro orizzontale (margin-left & margin-right: auto) e tenerlo fissato al 320px larghezza (width: 320px). Puoi aggiungere qualsiasi combinazione di stili per ottenere ciò che stai veramente cercando.

Spero che questo aiuti!

fonte

2012-12-19 14:08:49 akamaozu

upvote per spiegare tutto così chiaramente. Penso che questo sarebbe utile pure. – mason81

Utilizzare questa

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

Scegli questa presentation per la personalizzazione di meta tag

fonte

2012-12-20 05:07:16

Questa è una presentazione carina e molto utile che hai collegato. Grazie. – mason81

Galaxy Nexus Ignora il meta tag viewport

risposta

Problemi correlati