L'impostazione della vista Android "scalabile dall'utente = no" interrompe il livello di larghezza/zoom della vista

Question

Sto lavorando a un'app Web con una larghezza di 640 px.

Nel documento head ho impostato

<meta name="viewport" content = "width=640, user-scalable=no" /> 

modo che il contenuto è ben visualizzato e allungata orizzontalmente.
Questo funziona perfettamente su iOS ma in Android il browser apre il sito web ingrandito in modo che l'utente debba fare doppio clic per ridurre l'ingrandimento e l'intera pagina.

quando cambio l'impostazione finestra per lasciare fuori il tag user-scalable in questo modo:

<meta name="viewport" content="width=640" /> 

il browser di Android regola ben al 640px - così funziona.
Il problema tuttavia ora è che gli utenti possono eseguire lo zoom avanti e indietro su Android e iOS poiché il tag user-scalable non è impostato.

Come posso proibire il ridimensionamento e allo stesso tempo impostare la larghezza della vista su 640px su Android?

Answer 1

Cercando rendendo il meta tag viewport in questo modo:

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

impostazioni di scala impostazione fissati restrizioni per gli utenti su quanto lontano possono diminuire, e così se si imposta la iniziale e massima per lo stesso importo, questo dovrebbe risolvere il problema.

UPDATE: ero in grado di risolvere il mio bug per i dispositivi Android tutti insieme impostando il seguito:

<meta name="viewport" content="width=640px, initial-scale=.5, maximum-scale=.5" /> 

Ho anche notato che alcuni contenuti, come ad esempio i tag p non fosse scorre sullo schermo, quindi l'hack sarebbe quello di aggiungere la proprietà background-image con una stringa vuota a qualsiasi contenuto che è bloccato e che non sta attraversando la vista del layout. Spero che questo ti aiuti questa volta.

Answer 2

Ho avuto la stessa situazione, se si desidera che il contenuto per adattarlo sempre la larghezza dello schermo senza permettere all'utente di zoom in/out, utilizzare i seguenti meta tag (questo sarà il lavoro non importa ciò che la larghezza si dà)

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

Answer 3

Volevo che il cellulare mostrasse sempre un sito web di 640 px di larghezza a causa di un design che altrimenti si sarebbe rotto. (un design che non ho realizzato ..) In tal modo ho voluto disabilitare lo zoom per gli utenti mobili. Che cosa ha funzionato per me me è la seguente:

- AGGIORNAMENTO 2013-10-31

Prima di tutto, non c'è modo si può fare questo senza Javascript. Dovrai controllare la stringa dell'agente utente. Quindi ho creato un mobile-viewport.js e incluso lo script appena prima del tag di chiusura:

function writeViewPort() { 
    var ua = navigator.userAgent; 
    var viewportChanged = false; 
    var scale = 0; 

    if (ua.indexOf("Android") >= 0 && ua.indexOf("AppleWebKit") >= 0) { 
     var webkitVersion = parseFloat(ua.slice(ua.indexOf("AppleWebKit") + 12)); 
     // targets android browser, not chrome browser (http://jimbergman.net/webkit-version-in-android-version/) 
     if (webkitVersion < 535) { 
      viewportChanged = true; 
      scale = getScaleWithScreenwidth(); 
      document.write('<meta name="viewport" content="width=640, initial-scale=' + scale + ', minimum-scale=' + scale + ', maximum-scale=' + scale + '" />'); 
     } 
    } 

    if (ua.indexOf("Firefox") >= 0) { 
     viewportChanged = true; 
     scale = (getScaleWithScreenwidth()/2); 
     document.write('<meta name="viewport" content="width=640, user-scalable=false, initial-scale=' + scale + '" />'); 
    } 

    if (!viewportChanged) { 
     document.write('<meta name="viewport" content="width=640, user-scalable=false" />'); 
    } 

    if (ua.indexOf("IEMobile") >= 0) { 
     document.write('<meta name="MobileOptimized" content="640" />'); 
    } 

    document.write('<meta name="HandheldFriendly" content="true"/>'); 
} 

function getScaleWithScreenwidth() { 
    var viewportWidth = 640; 
    var screenWidth = window.innerWidth; 
    return (screenWidth/viewportWidth); 
} 

writeViewPort(); 

Lo script verifica se il visitatore ha un androide (non cromato) o Firefox. Il browser Android non supporta la combinazione di width = 640 e user-scalable = false, e il browser firefox ha una larghezza doppia dello schermo per qualche strana ragione. Se il visitatore ha un Windows Phone, viene impostato il browser IE MobileOptimized.