Viewport-Meta-Tag funktioniert nicht wie erwartet unter Android

Question

Ich habe eine Responsive-Website erstellt und das Viewport-Meta-Tag verwendet, um die Skalierung auf verschiedenen Geräten zu beheben. Ich habe auch JavaScript zu sagen, die Geräte nicht maßstäblich unter 525px, da dies die min-Breite meines Körpers Element verwendet:

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

window.onload = function() { 
    if(window.innerWidth <= 525) { 
     var mvp = document.getElementById('myViewport'); 
     mvp.setAttribute('content','width=525'); 
    } 
} 

Das funktioniert perfekt auf fast alle Geräte, die ich getestet habe auf; speziell funktioniert es perfekt auf iOS-Mobilgeräten (iPhones/iPads). Die Website ist perfekt skaliert, alles passt auf den Bildschirm und der Benutzer muss nicht horizontal scrollen, heranzoomen oder herauszoomen.

Beim Anzeigen der Website auf einem Android-Gerät passt es jedoch nicht wie erwartet auf den Bildschirm. Um sicherzustellen, dass alle Inhalte auf den Bildschirm passen, muss der Benutzer leicht herauszoomen. Dies bedeutet, dass das Ansichtsfenster auf Android-Geräten nicht ordnungsgemäß funktioniert. Irgendwelche Ideen warum?

Ich möchte grundsätzlich die Website auf jedem Gerät laden und perfekt in den Bildschirm passen, so dass der Benutzer nicht für den Inhalt verkleinern muss.

Der Link zur Website ist: www.wyevalleycampers.com/Version2/

Answer 1

Wenn der Seiteninhalt breiter ist als das Gerät Ansichtsfenster, Chrome wird die Seite vollständig herausgezoomt, um laden, so dass der gesamte Inhalt sichtbar ist.

Sie haben den Browser in Ihrem Fall zu stark eingeschränkt. Wenn window.innerWidth < = 525 ist, verfügt das Gerät des Benutzers über ein Ansichtsfenster, das kleiner als 525 Pixel breit ist. Anschließend weisen Sie den Browser an, ihn in ein 525 Pixel breites Layout zu rendern. Da Sie den minimalen und anfänglichen Maßstab auf 1 festgelegt haben, kann der Browser nicht auszoomen, um den gesamten Inhalt anzuzeigen. Es muss verkleinert werden, da der Darstellungsbereich kleiner als die Inhaltsbreite ist. Das Entfernen der Anfangs- und Mindestskalen sollte helfen.

Apple hat kürzlich aufgehört, das user-scalable Attribut des Viewport-Meta-Tags zu respektieren, ich nehme an, dass sie minimum-scale aus dem gleichen Grund nicht respektieren.