Viewport

Unter Viewport wird der verfügbare Anzeigebereich für die Darstellung der Website verstanden. Damit die Anwendung auf dem Smartphone wie auch auf dem Desktop-PC optimal dargestellt wird, werden Regeln für die entsprechenden Anzeigebereiche definiert.

Die Größe des Anzeigebereichs der Webanwendung variiert sehr stark, je nachdem welches Gerät eingesetzt wird. Mit dem HTML-Meta-Element viewport kann u. a. die Breite des jeweiligen Gerätes abgefragt werden, damit entsprechende Regeln für die Website-Darstellung greifen.

Typische Viewport-Einteilungen sind:

Desktop Large

     

  • Zielgruppe: Hochauflösende Desktop-Bildschirme
  • Bildschirmbreite: ab 1200 Pixel
  •  

Tablet

     

  • Zielgruppe: Tablets, Phablets
  • Bildschirmbreite: ~ 768 bis 1024 Pixel
  •  

Desktop Small

     

  • Zielgruppe: Niedrigauflösende Desktop-Bildschirme
  • Bildschirmbreite: ~ 1024 bis 1200 Pixel
Phone

  • Zielgruppe: Smartphones
  • Bildbreite: ~ 320 bis 768 Pixel