Nach dem gestrigen „Relaunch des Blogs“:/blog/archives/3205-Relaunch-von-Nur-ein-Blog „ärgern“ wir (Matthias und ich) uns noch ein wenig mit dem iPad herum.
Nur ein Blog hat – untechnisch gesagt – zwei Möglichkeiten zur Ansicht:
* Das „normale“ Layout sieht man, wenn der Bildschirm eine höhere Auflösung als 979 Pixel hat.
* Das „mobile“ Layout (alle Blogelemente finden sich untereinander) wird bei einer geringeren Auflösung aktiviert.
Im Landscape Modus bietet das iPad zwar 1024 Pixel Breite, die besuchte Website kann dies jedoch nicht so einfach feststellen. Denn wie Matthias bei „quirksmode gefunden hat“:http://www.quirksmode.org/blog/archives/2010/04/the_orientation.html:
bq. However, there?s a problem on iPhone OS. There the device width is always 320px (iPhone) or, I assume, 768px for the iPad. […] This device width stays the same when you switch to landscape mode. It is not updated to reflect the wider screen you now have available.
Eine „Lösungsidee von Cloud Four“:http://www.cloudfour.com/ipad-orientation-css/ hat mir „Alexander Abelt“:http://abelt.im/ übermittelt. Danke dafür.
Die perfekte Lösung ist noch in Arbeit. Ich drücke die Daumen…
Man sollte 2 Dinge dazu sagen:
* Wir „zielen“ hier eben *nicht* nur auf iPhone und iPad, sondern auch sowohl auf andere Mobilgeräte wie auch auf Rechner mit kleineren Bildschirmauflösungen und kleinere Browserfenster.
* Der Wert 979px ist in diesem Design schon zu klein, das müssen 1014px werden. 979 ist so ein Standardwert für die heute sehr gängigen 960er-Breiten (plus Luft für den Scrollbalken).
Stimmt. Uns/mir sind alle Mobilgeräte gleich viel wert 🙂
Aber als iPad User hätte ich natürlich ein besonderes Interesse an einer Lösung 😉
Ich habe das (vereinfacht) so gelöst — es ändert sich nur die Fontgröße:
pre.. @media all and (orientation:landscape)
{
body { font-size: 10pt; }
}
@media all and (orientation:portrait)
{
body { font-size: 13pt; }
}
Das reicht hier leider nicht, zumal die orientation eben auch von anderen Browsern erzeugt wird. So müsstest Du z.B. auch in einem Desktop-Browsern bei 600x800px eine andere Schriftgröße erhalten als bei 800x600px. Rein über die orientation zu arbeiten macht, soweit ich sehe, nur Sinn, wenn man quasi schon in einem eigenen Stylesheet für das iPad arbeitet.
Wir glauben, es jetzt zu haben. Mit einer winzigen Einschränkung, die kaum jemand bemerken dürfte. Erläuterung folgt, vermutlich bei mir im Blog (wird Robert dann hier irgendwo verlinken).