it-swarm.com.de

Vollständige Webseite und deaktiviertes Zoom-Viewport-Meta-Tag für alle mobilen Browser

Ich möchte, dass meine Webseite im Vollbildmodus angezeigt wird und das Zoomen auf allen mobilen Geräten deaktiviert ist.

Mit dem Meta-Tag:

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

Ich kann dies für iPhone/iPad tun, aber auf Android-Geräten wird die Website auf etwa 125% vergrößert.

Wenn ich den Tag verwende 

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

Ich bekomme das gegenteilige Ergebnis. Dann funktioniert es auf Android, aber nicht auf iPad/iPhone.

43
Coen Ponsen

Leider hat jeder Browser eine eigene Implementierung des Viewport-Meta-Tags. Verschiedene Kombinationen funktionieren in verschiedenen Browsern.

Android 2.2: Viewport-Meta-Tag scheint überhaupt nicht unterstützt zu werden.

Android 2.3.x/3.x: Durch die Einstellung von user-scalable = no deaktivieren Sie auch die Skalierung des Viewport-Meta-Tags. Dies ist wahrscheinlich der Grund, warum Ihre Breitenoption keine Wirkung hat. Damit der Browser Ihren Inhalt skalieren kann, müssen Sie user-scalable = yes einstellen. Wenn Sie den Zoom deaktivieren möchten, können Sie die Min- und Max-Skalierung auf den gleichen Wert einstellen, sodass er nicht verkleinern oder wachsen kann. Spielen Sie mit der anfänglichen Skala, bis Ihre Website gut passt.

<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,height=device-height,target-densitydpi=device-dpi,user-scalable=yes" />

Android 4.x: Dieselbe Regel gilt wie für 2.3.x, außer dass die Min- und Max-Skalen nicht mehr berücksichtigt werden. Wenn Sie user-scalable = yes verwenden, kann der Benutzer immer zoomen und ihn einstellen "Nein" bedeutet, dass Ihre eigene Skala ignoriert wird. Dies ist das Problem, mit dem ich jetzt konfrontiert bin, das mich zu dieser Frage zog ... In 4.x scheint es nicht möglich zu sein, Zoom und Skalierung gleichzeitig zu deaktivieren.

iOS/Safari (4.x/5.x getestet): Skalen funktionieren wie erwartet. Sie können die Skalierung mit benutzerskalierbar = 0 deaktivieren (Schlüsselwörter ja/nein funktionieren in 4 nicht) .x). iOS/Safari hat auch kein Konzept von target-densitydpi, daher sollten Sie das auslassen, um Fehler zu vermeiden. Sie brauchen nicht min und max, da Sie das Zoomen wie erwartet abschalten können. Verwenden Sie nur width oder Sie stoßen in den iOS-Orientierungsfehler

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

Chrome: Skalen funktionieren wie erwartet unter iOS, Min und Max werden berücksichtigt und Sie können das Zoomen mit user-scalable = no abschalten.

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

Fazit: Sie können einige recht einfache JS verwenden, um den Inhalt nach einer grundlegenden Browser-/Geräteerkennung entsprechend einzustellen. Ich weiß, dass diese Art der Erkennung missbilligt wird, aber in diesem Fall ist es fast unvermeidlich, da jeder Anbieter sein eigenes Ding gemacht hat! Ich hoffe, das hilft den Leuten, die gegen den Viewport kämpfen, und wenn jemand eine Lösung zum Deaktivieren des Zoomens in Android 4.x hat, OHNE den Viewport zu verwenden, lass es mich wissen.

[BEARBEITEN]

Android 4.x Chrome-Browser (der meiner Meinung nach in den meisten Ländern vorinstalliert ist): Sie können sicherstellen, dass der Benutzer nicht zoomen kann und die Seite im Vollbildmodus angezeigt wird. Der Nachteil: Sie müssen sicherstellen, dass der Inhalt eine feste Breite hat. Ich habe dies nicht auf niedrigeren Android-Versionen getestet. Siehe dazu das Beispiel: 

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

[Bearbeiten 2]

iOS/Safari 7.1: Seit v7.1 hat Apple ein neues Flag für den Viewport-Meta-Tag mit dem Namen minimal-ui eingeführt. Zur Unterstützung von Vollbild-Apps werden die Adressleiste und die untere Symbolleiste für eine Vollbildansicht ausgeblendet (nicht ganz Vollbild-API, aber nahe und erfordert keine Benutzerakzeptanz). Es kommt auch mit seinem fairen Anteil an Fehlern und funktioniert nicht auf iPads.

<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0, minimal-ui" />

[EDIT 3]

iOS/Safari 8 Beta 4: Das in EDIT 2 erwähnte Viewport-Meta-Tag minimal-ui wurde nun in dieser Version von Apple entfernt. Quelle - WebKit Notes

83
BrutalDev

HTML

<head>
    <meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1'>
</head>

jQuery

Option 1:

$('meta[name=viewport]').attr('content','width='+$(window).width()+',user-scalable=no');

Option 2:

var deviceSpecific = {
    iPad: 'width=1165,user-scalable=no'
};
if(navigator.userAgent.match(/iPad/i){
    $('meta[name=viewport]').attr('content',deviceSpecific.iPad);
}

Option zwei ist ein bisschen mehr ein letzter Ausweg, wenn Sie Unstimmigkeiten feststellen.

4
Alastair

Verwenden Sie einfach:

<meta name="HandheldFriendly" content="True" />

Funktioniert gut auf meinem Samsung Note II und HTC Desire.

3
user1433439

Für Apple Geräte ist das einfach:

<meta name="Apple-mobile-web-app-capable" content="yes" />
<meta name="Apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />

Beim ersten Tag wird die Web-App im Vollbildmodus ausgeführt, wenn Sie sie über ein Verknüpfungssymbol auf dem Startbildschirm des iPhone/iPod/iPad öffnen.

Die zweiten Tags funktionieren nur in Verbindung mit dem ersten. Mögliche Werte sind: default, black und black transluzent.

Das dritte Tag blockiert die Breite der Site auf ihre Standardgröße (1,0) und erlaubt kein Zoomen. 

HINWEIS: Da die Metatags "Apple-mobile" auf Geräten von Drittanbietern ignoriert werden und das dritte Tag offiziell in HTML5 ist, können Sie alle zusammen verwenden.

Für Android gibt es keine globale Lösung, da nicht jeder den Standard-Android-Webbrowser verwendet. Siehe Fullscreen-Web-App für Android

Hier noch einige nützliche Links:

Tipps für iOS: http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/

Alle offiziellen und inoffiziellen bekannten Meta: https://Gist.github.com/kevinSuttle/1997924

2

Ich habe ein Samsung Galaxy Note 4 und verwende Chrome als Browser. Ich stellte fest, dass es die Viewport-Meta-Tags ignorierte und mit HandheldFriendly funktionieren konnte. Ich endete mit einer Meta-Tag-Combo. Funktioniert für mich auf Android und iOS. 

<meta name="HandheldFriendly" content="True">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=YOUR_SITE_WIDTH">
2
Giacomo

Android hat es ab Version 4.4.2 behoben

<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,height=device-height,target-densitydpi=device-dpi,user-scalable=yes" />
1
jargalan

Wir haben das folgende Javascript in der Kopfzeile verwendet, um die Meta-Tags festzulegen:

<script>
  if (navigator.userAgent.match(/(iPad|iPhone|iPod)/g) {
    document.write("<meta name='viewport' content='width=1165, user-scalable=no'>"); // or whichever meta tags make sense for your site
  } else {
    document.write("<meta name='viewport' content='width=max-device-width, user-   scalable=no'>"); // again, which ever meta tags you need
  }
</script>

Sie können zusätzliche Bedingungen hinzufügen und diese für Ihre speziellen Anforderungen festlegen. 

0
Kalimar Maia

Ich verwende diesen Code, um das Zoomen im iPhone zu verhindern, und das Problem wurde gelöst, aber ein anderes Problem tritt auf; Wenn ich auf das Eingabefeld klicke, springt das gesamte Fenster nach oben und setzt seine Position auf "Normal". Wenn ich auf "Los" drücke, tritt dasselbe Verhalten auf und das Fenster springt. Ich muss den Sprung loswerden, so dass nur die Größe des Fensters an die normale Position angepasst wird.

function zoomDisable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />');
}
0
Saad Ahmed
<meta name="viewport" content="width=device-width; height=device-height; maximum-scale=1.4; initial- scale=1.0; user-scalable=yes"/>
0
Shakeel

Was es wert ist, hier ist, was ich verwendet habe, um eine 1024px breite Content-Seite zu bekommen, um auf meinem Nexus 7 (Android 4.2.2)/Chrome, nur Querformat, ohne Javascript zu verwenden *:

width=device-width, initial-scale=.94, minimum-scale=0.8, maximum-scale=1.2, user-scalable=no

(Ich denke, das user-scalable = no negiert tatsächlich die Min- & Max-Skala). Ich habe den 0,94-Wert durch Ausprobieren erhalten, nicht durch irgendeine Art von Berechnung, die die Pixeldichte der Geräte oder ähnliches aufruft.

* d.h. um die Breite des Inhalts zum Erzwingen des Fensters zu zwingen - Ich habe js verwendet, um den Viewport-Meta-Inhalt bedingt zu schreiben.

0
David Smith

Ich hatte alle möglichen Probleme damit und fing sogar an, ein Browser-Erkennungssystem zu entwickeln, um verschiedene Viewport-Tags für verschiedene Browser bereitzustellen. Dann beschloss ich zu vereinfachen, was ich tat und alles funktionierte. Stellen Sie das Ansichtsfenster auf die Breite ein, die Ihre Site haben soll, und gehen Sie weg. Jetzt funktioniert alles.

<meta name="viewport" content="width=1165 />
0
Dan B

Der folgende Vorschlag von Dan B hat für mich großartig funktioniert. Ich hatte alle möglichen Probleme mit dem Versuch, meine Website auf Android zu laden, und dies hat alles geregelt. Für jetzt sowieso!

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

Vielen Dank!

0
user2390584