Schlagwort: viewport

Aktueller CSS Media-Query zur Anzeige von hochauflösenden Bildern

Ich habe heute einen sehr interessanten und aktuellen Artikel über die Einbindung von CSS Media-Queries zur Anzeige von Grafiken auf hochauflösenden Displays gelesen. Der Ursprung liegt in der Markteinführung des Apple iPhone 4 und folgender CSS-Deklaration:

.image {
  background-image: url("images/200_200.png");
  width: 200px;
  height: 200px;
}
 
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .image {
    background-image: url("images/400_400.png");
    background-size: 200px 200px;
  }
}

Inzwischen verfügen aber auch Smartphones mit Android oder Windows-Phone Betriebssystemen über die Möglichkeit zur Darstellung von hochauflösenden Grafiken auf hochauflösenden Displays. Im Wandel der Zeit hat sich daher auch die zur verwendende CSS Media-Query-Eigenschaft angepasst (siehe Retina Display Ready With Media Query):

@media 
/* WebKit based browsers (Chrome, Safari, latest Opera) */
only screen and (-webkit-min-device-pixel-ratio: 1.5), 
/* Older Firefox browsers (prior to Firefox 16) */
only screen and (min--moz-device-pixel-ratio: 2),   
/* Opera Mini & Opera Mobile */
only screen and (-o-min-device-pixel-ratio: 3/2),  
/* Kindle Fire, Kindle HD */
only screen and (min-device-pixel-ratio: 1.5),  
/* The standard way: dots-per-physical-inch */
only screen and (min-resolution: 2dppx),
/* dppx-Fallback: dots-per-CSS-inch */
only screen and (min-resolution: 192dpi) {
  .image {
    background-image: url("images/400_400.png");
    background-size: 200px 200px;
  }
}

Der empfohlene Weg ist demnach die Verwendung des Kriteriums „min-resolution“. Googles Chrome-Browser zeigt in der Developer Console sogar eine Meldung an, falls ein anderer Media-Query verwendet wird:

Consider using ‚dppx‘ units instead of ‚dpi‘, as in CSS ‚dpi‘ means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual ‚dpi‘ of a screen.

Für die Unterstützung älterer Geräte müssen weiterhin die anderen Eingrenzungen verwendet werden. Damit die Media-Queries wie erwartet funktionieren, muss im HTML-Dokument folgendes HTML-Tag im Kopfbereich gesetzt werden:

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

Die Zukunft verspricht jedoch eine Ablösung des Viewport-Meta-Tags durch folgende CSS-Angaben (siehe An introduction to meta viewport and @viewport):

@-webkit-viewport { width: device-width }
@-moz-viewport { width: device-width }
@-ms-viewport { width: device-width }
@-o-viewport { width: device-width }
@viewport { width: device-width }

Um der Flut an herstellerspezifischen Angaben gerecht zu werden, empfehle ich die dynamische Stylesheet Sprache Less in Kombination mit LESS Hat 2. Wer nur LESS benutzen möchte, der kann sich mit folgendem Mixin behelfen:

@highdensity: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)",
~"only screen and (min--moz-device-pixel-ratio: 2)",
~"only screen and (-o-min-device-pixel-ratio: 3/2)",
~"only screen and (min-device-pixel-ratio: 1.5)",
~"only screen and (min-resolution: 2dppx)",
~"only screen and (min-resolution: 192dpi)";
 
.image {
  background-image: url("images/200_200.png");
  width: 200px;
  height: 200px;
  @media @highdensity {
    background-image: url("images/400_400.png");
    background-size: 200px 200px;
  }
}

Pinch-Zooming auf Android-Geräten deaktivieren

Auf Android-Geräten kann mit einem Tap auf einer Webseite herangezoomt werden. Genau so ist es möglich, aus einer Webseite heraus zu zoomen (Pinch-Zoom). Um das zu verhindern, kann folgendes Meta-Tag eingesetzt werden:

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

Set viewport content with JavaScript and HTML5

In modern mobile devices and HTML5 browsers you can set the viewport content (for example the webpage zoom and webpage dimension) with a single meta tag:

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

If you want to do this with JavaScript, then you need a viewport meta-tag with empty content:

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

Then you can change the content by using JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function setViewPort(viewPortContent){
  var metas = document.getElementsByTagName('meta');
  var i;
  if (navigator.userAgent.match(/iPhone/i)) {
    for (i=0; i<metas.length; i++) {
      if (metas[i].name == 'viewport') {
        metas[i].content = viewPortContent;
      }
    }
  }
}
 
var viewPortContent = 'width=device-width,initial-scale=2.0,minimum-scale=2.0,maximum-scale=2.0, user-scalable=no';
setViewPort(viewPortContent);

How to get the iPad viewport size with jQuery

Detecting the viewport size of an Apple iPad is very easy with jQuery. You just have to use the following code example:

1
2
3
4
5
6
7
8

    <script src="./js/jquery.js"></script>
    <script type="text/javascript">
      var width = $(window).width(); 
      var height = $(window).height(); 
      var pre = document.createElement('pre');
      pre.textContent = 'Viewport: '+width+'x'+height+' pixels';
      document.body.appendChild(pre);
    </script>

The viewport for an iPad in landscape mode (with address bar) is 1024×690 pixels.
The viewport for an iPad in portrait mode (with address bar) is 768×946 pixels.
The viewport for an iPad in portrait mode (with address bar and debug console) is 768×896 pixels.

If you want to hide the address bar in portrait mode then you have to add the website to your homescreen and their must be this meta tag in your website’s header:

<meta name="apple-mobile-web-app-capable" content="yes" />

The viewport for a fullscreen portrait mode is then 768×1004 pixels.
The resolutions are based on the following setting:

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

If you do not have this setting (or if you use different values for it), then the viewport will be lager or even smaller.