- - Javítsa ki az Apple Device Safari Viewport méretező hibát [Hogyan]

Javítsa ki az Apple Device Safari Viewport méretező hibát [Hogyan]

Ha Ön web-tervező, akkor a hibátA nézőpont-méretezés talán szembesült vele, ami az Apple eszközökön, azaz az iPod, az iPhone és az iPad készülékeken fordul elő. Időnként, amikor az Apple-eszközt álló helyzetből fekvő tájolásba forgatjuk, a webhely nagyít, és olyan nézetet mutat, amely szélessége meghaladja az eszköz szélességét. Ennek oka az, hogy a tervező a nézetablak szélességét az eszköz szélességére állította. Annak érdekében, hogy megértsük, hogyan működik ez a hiba, elkészítettünk egy mintaoldalt, és az iPad készüléket álló helyzetből tájra néztük.

függőleges minta

tájkép minta - Másolás

Az említett hiba gyors javítása vezet bennünket a„Maximális méret = 1” a nézetablak metacímkéjében. Ez egyelőre megoldja a problémát, de az oldal már nem nagyítható, mert az eszköz szélességéhez hasonló maximális szélességet rögzítünk.

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

Ez a gyors javítás nem pontosan a tökéletes megoldás. A tervezők, például a @mathias, a @cheeaun és a @jdalton tervezők kemény munkájának eredményeként mostantól van egy javascript, amelyet felvehetünk a <head> részbe annak érdekében, hogy állandó megoldást kapjunk. E megoldás értelmében az oldal nagyításra képes.

<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]) &amp;&amp; addEvent in doc) {
fix();
scales = [.25, 1.6];
doc[addEvent](type, fix, true);
}
}(document));
</script>

Ez az egyetlen ismert megoldás, amelyet a tervezők eddig kidolgoztak. De ha van még egy javításodra a hiba, ossza meg velünk a megjegyzésekben.

Hozzászólások