HTML Viewpoint (Breite Webseite) für Mobile Geräte einstellen und dynamisch skalieren (Responsive Design)

Gepostet am September 13, 2014

Der folgende Viewpoint HTML-Code sorgt für eine korrekte Skalierung der Website beim ersten Aufruf auf dem mobilen Gerät.
Die Browser der mobilen Devices gehen zuerst einmal davon aus, dass Websites nicht für mobile Endgeräte ausgelegt sind und die Website-Breite die Display-Breite um einiges übersteigt. Dabei werden im Gerät feste Breiten hinterlegt (oft 980px) in der eine Webseite dann dargestellt wir. Diesen festen Viewpoint kann man wie folgt anpassen:

1
2
3
4
5
6
<!DOCTYPE html>
<head>
    <meta name="viewport" content="width=1024" />
</head>
<body>
</body>

Dreht man das Display eines mobilen Gerätes sind die Auflösungen oft unterschiedlich. Soll die Webseite immer dynamisch an die Bildschirmbreite angepasst werden, verwendet man folgende Zeile:

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

initial-scale: Der Wert legt den anfänglichen Zoomgrad fest. 1.0 führt dazu, dass die Inhalte 1:1 dargestellt werden.
user-scalable: Mit diesem Attribut kann man definieren, ob der Nutzer auf der Seite zoomen kann (yes) oder nicht (no).
minimum-scale und maximum-scale: Diese beiden Eigenschaft ermöglichen es, den Zoomgrad einzuschränken. Setzt man z.B. die maximale Skalierung auf 2.0, kann der Inhalt maximal 2x-fach vergrößert werden.

Tags: ,

Leave a Reply

 

Posts of Current Category



Facebook: