Kategorien
Browser Frontend: HTML5, CSS3, jQuery

iOS 9/Safari: was tun, wenn die responsive Website nicht mehr über die komplette Breite geht?

Unter iOS 9 kann es dazu kommen, dass responsive Seiten in der Breite schrumpfen, wenn ein Element breiter als der Viewport ist. Mögliche Lösung: die Viewport-Angabe um shrink-to-fit=no ergänzen, so wird dann <meta name="viewport" content="initial-scale=1, width=device-width, shrink-to-fit=no"> daraus.

Oft gibt es auch den Tipp, maximum-scale auf 1 oder user-scalable auf no zu setzen, aber das lasst ihr mal lieber, da man sonst nicht mehr zoomen kann.

(Erinnert sich noch jemand an viewport=minimal-ui? Hahaha …)

Kategorien
Frontend: HTML5, CSS3, jQuery Webdesign/Gestaltung

viewport=“minimal-ui“ für mehr Platz im iOS-Safari (mit iOS-8-Update)

Ein Update zu iOS 8: dort fällt minimal-ui wieder raus und wird nicht mehr unterstützt. Insofern ist dieser Beitrag ab Herbst 2014 „egal“. (Quelle)

Ab iOS 7.1 soll kein Javascript mehr nötig sein um Adressleiste und Navigationsleiste (Top Bar, Bottom Bar) im iOS’schen Safari beim Laden der Seite auszublenden. Dazu muss die viewport-Meta-Angabe nur um minimal-ui ergänzt werden, zusammen sieht das dann zum Beispiel so aus:

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

Wird besonders HTML5-Spieleentwickler freuen.

(via djmc)

Update vom 10.03.2014: iOS 7.1 ist seit gestern als Update verfügbar, hier hat sich jemand die Mühe gemacht minimal-ui in Aktion zu zeigen.