Eine Website unresponsive machen

Nach dem Redesign einer alten Website, die bisher noch nie etwas von „Responsive Webdesign“ gehört hat, gibt es in seltenen Fällen Inhalte, die so komplex, speziell oder statisch sind, dass sie nicht – zumindest nicht auf die Schnelle – auf mobile Endgeräte optimiert werden können. Dieser Fall trat kürzlich für eine einzelne Webseite eines Webportals ein und es stellte sich die Frage der geschicktesten Herangehensweise.

Man könnte sich nun einen Haufen Arbeit auflasten und mittels einer Weiche ein komplett unresponsives CSS inkludieren oder mittels einer erweiternden CSS-Datei alle „Media Queries“ überschreiben und dem umschließenden Container eine feste Breite geben.

Geschickter ist dies allerdings mittels eines Einzeilers zu lösen: Während man mit der Viewport-Meta-Angabe width=device-width, initial-scale=1 dem Browser signalisiert, dass es sich bei diesem Dokument um eine responsive Webseite handelt, kann diese Angabe auch in einen festen Pixelwert abgeändert werden.

Meta-Angabe für resonsive Webseiten

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

Meta-Angabe für non-resonsive Webseiten

<meta name="viewport" content="width=1200">

In dem Beispiel wird eine feste Breite von 1200 Pixeln angegeben, welche von mobilen Geräten berücksichtigt wird. So wird auf einem Smartphone oder Tablet die normale Desktop-Ansicht zum hinein zoomen dargestellt. Der Angegebene Pixelwert sollte der Breite der ursprünglichen Website – evtl. plus etwas Margin für links und rechts – entsprechen.

Auf dem heimischen Rechner wird die Meta-Angabe allerdings nicht berücksichtigt, die Website bleibt weiterhin responsive und passt sich dem Bildschirm an, wenn der Anwender das Fenster kleiner zieht. Mit etwas Extra-CSS und einer Hinweismeldung ist dieses Verhalten allerdings schnell und nachvollziehbar entschuldigt.


Kommentare

Keine Kommentare vorhanden.