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.

Kategorien
Frontend: HTML5, CSS3, jQuery Mac & iPhone

HTML-title in iOS7

Fiel mir die Tage auf: in iOS7 stellt Safari den <title> nicht mehr dar. Also, Überschriften schön hoch oben positionieren.

20130906-214639.jpg

Kategorien
Technik und Gadgets

Auf einer Website in Safari suchen

Auch schon auf einer laaangen Internetseite gewesen und nach einem Begriff gesucht? Statt zu scrollen und lesen geht es auch einfacher: Suchfeld öffnen, Begriff eingeben und nach unten scrollen:

20130820-215730.jpg

20130820-215806.jpg

Kategorien
Frontend: HTML5, CSS3, jQuery

Verschachtelung von @media / Media Queries

Update, Februar 2016: Ab Safari 6.1 (OS X) wurde das Verhalten verändert und auch hier wird nun die zweite content-Deklaration („at media in at media“) angezeigt. IE11 hat noch das gleiche Verhalten wie IE9 und IE10 inne und zeigt nur das erste content. Microsofts Edge widerum macht es nach CSS3 und stellt das zweite content dar.

Vor ein paar Wochen stolperte ich über die verschiedenen Interpretationen von verschachtelten @media-Anweisungen. Die jeweils aktuellen Versionen von Safari auf OS X (6.0.3) und iOS (6.0) sowie IE9 und IE10 interpretierten den nachfolgenden Code etwas anders als Firefox (20.0) und Chrome (26.0.1410.65):

@media screen {
  .wrapper {
    dispay: block;
  }
  .wrapper:before {
    content:"at media";
    display: block;
  }
  @media screen and (min-width: 2em) {
    .wrapper:before {
      content:"at media screen in at media";
    }
  }
}
Check out this Pen!

Die Safaris nämlich schreiben den ersten content („at media“) auf die Seite, Firefox und Chrome den zweiten („at media screen in at media“). Beim Internet Explorer sieht es so aus: IE9 und IE10 zeigen den ersten content. Mich interessierte wieso das so ist und was richtig ist: die Safaris verhalten sich nach dem CSS-2.1-Regelwerk, das kein verschachteln von @media-Regeln erlaubt:

At-rules inside @media are invalid in CSS2.1.

Die CSS-3-Spezifikation hingegen, wonach sich Firefox und Chrome richten, erlaubt es.

This means that when multiple conditional group rules are nested, a rule inside of both of them applies only when all of the rules‘ conditions are true.

Detaillierter erklärt hat es Daniel Tan bei Stack Overflow:

Now, the actual issue here is that nested @media rules are not valid in CSS2.1 because you’re not allowed to nest any at-rules within @media rules. However, things seem quite different in CSS3. Namely, the CSS3 Conditional Rules module states very clearly that @media rules can be nested, even providing an example:

Natürlich kann man sich fragen, wieso man die beiden @media-Regeln überhaupt verschachtelt. Das kam daher, dass ich mit der Contao-Erweiterung theme_plus ein Stylesheet einband und diesem eine @media-Anweisung auf den Weg gab. Dazu dann noch das Media Query im Stylesheet selbst und schon stolperte ich über das oben genannte Problem.

Einen wirklichen Rat kann ich euch nicht auf den Weg geben. Achtet darauf, ob und welche @media-Anweisungen ihr verschachtelt. Ich habe zum Beispiel die für das gesamte Dokument entfernt, da ich sie im Stylesheet nicht benötigte – und auch im ersten Moment nicht mitbekam, dass sie mitgegeben wird. Wenn ihr eure Stylesheets nur für eine Geräteklasse verwenden lassen wollt, könnt ihr dies auch im <link /> angeben: <link media="screen" />. Oder ihr schreibt eure Media Queries, wenn sie in einem @media-Screen-Selektor stehen nur folgendermaßen: (max-width: 40em) { color: #b4d455; }