viewport: device-width minimalen Wert selbst festlegen (iPhone vs. Android)

Die Metaangabe viewport ist eine feine Sache. Mit dem Klassiker

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

kann man dafür sorgen, dass die verschiedensten Endgeräte ihre Displaygröße unabhängig von Pixelverhältnissen zurückengeben. Ein iPad 3 gibt so in der horizontalen Ansicht 1024px anstatt die nativen 2048px.

Nun wäre das alles super, wenn nicht z.B. gerade das iPhone lächerliche 320px Bildschirmbreite im Hochformat zurückgeben würde. MIt dieser Bildschirmbreite kann bzw. will man sich erst gar nicht abgeben. 480px stellen meiner Meinung nach für ein brauchbares Layout das absolute Minimum dar. Leider kann man an den zurückgegeben Werten nichts machen. Man will ja, dass die CSS Media Queries alle korrekt arbeiten und nicht das Rad ein zweites mal erfinden. Abhilfe schafft folgendes jQuery Snipped. Es überprüft die zurückgegebene Displaybreite und passt diese ggf. für den viewport an.

jQuery(document).ready(function () {
jQuery(window).resize(function () {
    jQuery(function () {
        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB10|Trident/i.test(navigator.userAgent)) {
			var $window = $(window);

			var windowWidth = ( $window.width() &lt; window.screen.width ) ? $window.width() : window.screen.width;

			var minWidth = 480;
			var ratio    = windowWidth / minWidth;
			if (windowWidth &lt; minWidth) {
				$('meta[name="viewport"]').attr('content',
					'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio +
					', user-scalable=yes, width=' + windowWidth);

			} else {
				$('meta[name="viewport"]').attr('content',
					'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=yes, width=' + windowWidth);
			}

			if (/IEMobile\/10\.0|Trident/i.test(navigator.userAgent)) {
				var msViewportStyle = document.createElement("style");
				msViewportStyle.appendChild(document.createTextNode("@-ms-viewport{width:" + minWidth + "px!important}"));
				document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
			}

		}
    });
});
jQuery(window).trigger('resize');
}

Das ganze wird sinnigerweise in jQuery(document).ready() gepackt, damit es so früh wie möglich ausgeführt wird.

25.02.2015 (Ben):

  • UserAgent liste erweitert um neuste Blackberry Version (BB10)
  • Umbauen der Funktion von reiner Ready funktionalität auf die Resize Funktion. Dies ist nötig damit der Viewport beim ändern der Ausrichtung des Gerätes (Landscape/Portrait) neu berechnet wird.

05.05.2015 (Daniel):

  • UserAgent Trident  für IE>10 hinzugefügt

02.03.2016 (Daniel):

  • style inject für MobileIE hinzugefügt. Um Windows Phone 8 zu bedienen ist es notwendig, etwas CSS Code zu injizieren.