Wenn Sie ein Web-Designer sind, wird der Fehler als bekanntDie Viewpoint-Skalierung hat Sie möglicherweise konfrontiert, was bei Apple-Geräten wie iPod, iPhone und iPad der Fall ist. Wenn wir unser Apple-Gerät vom Hoch- zum Querformat drehen, wird die Site manchmal vergrößert und zeigt eine Ansicht mit einer Breite, die größer als die Gerätebreite ist. Dies liegt daran, dass der Designer die Ansichtsfensterbreite auf die Gerätebreite festgelegt hat. Um Ihnen eine Vorstellung davon zu verschaffen, wie dieser Fehler funktioniert, haben wir eine Beispielseite entworfen und unser iPad von Hochformat zu Querformat gedreht.
Eine schnelle Lösung für diesen Fehler führt uns zum Einstellen der‘Maximum-scale = 1’ im Viewport-Meta-Tag. Dies behebt das Problem vorerst, aber die Seite kann nicht mehr gezoomt werden, da die maximale Breite ähnlich der Gerätebreite festgelegt wird.
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
Diese schnelle Lösung ist nicht genau die perfekte Lösung. Durch die harte Arbeit von Designern wie @mathias, @cheeaun und @jdalton haben wir jetzt ein Javascript, das zum Abschnitt <head> hinzugefügt werden kann, um eine dauerhafte Lösung zu erhalten. Bei dieser Lösung bleibt die Seite zoomfähig.
<script type="text/javascript">
(function(doc) {
var addEvent = "addEventListener",
type = "gesturestart",
qsa = "querySelectorAll",
scales = [1, 1],
meta = qsa in doc ? doc[qsa]("meta[name=viewport]") : [];
function fix() {
meta.content = "width=device-width,minimum-scale=" + scales[0] + ",maximum-scale=" + scales[1];
doc.removeEventListener(type, fix, true);
}
if ((meta = meta[meta.length - 1]) && addEvent in doc) {
fix();
scales = [.25, 1.6];
doc[addEvent](type, fix, true);
}
}(document));
</script>Dies sind die einzigen bekannten Lösungen, die die Designer bisher entwickelt haben. Wenn Sie jedoch einen anderen haben, der diesen Fehler behebt, teilen Sie ihn uns in den Kommentaren mit.
Bemerkungen