Pokud jste webdesignér, je chyba známá jakoMěřítko pohledu vás mohlo čelit, ke kterému dochází v zařízeních Apple, tj. IPod, iPhone a iPad. Někdy, když otočíme naše zařízení Apple z orientace na výšku na orientaci na šířku, web se přiblíží a zobrazí nám pohled, jehož šířka je větší než šířka zařízení. Důvodem je, že návrhář nastavil šířku výřezu na šířku zařízení. Abychom vám pomohli získat představu, jak tato chyba funguje, navrhli jsme vzorovou stránku a otočili náš iPad z zobrazení na výšku na šířku.
Rychlá oprava uvedené chyby nás vede k nastavení„Maximum-scale = 1“ v metaznačce výřezu. To zatím problém nevyřeší, ale stránka již není možné přiblížit, protože opravujeme maximální šířku podobnou šířce zařízení.
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
Tato rychlá oprava není dokonalým řešením. Díky tvrdé práci návrhářů, jako jsou @mathias, @cheeaun a @jdalton, máme nyní javascript, který lze přidat do sekce <head>, abychom získali trvalé řešení. V rámci tohoto řešení zůstane stránka zvětšitelná.
<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>Toto jsou jediná známá řešení, se kterými návrháři doposud přišli. Pokud však máte tuto chybu opravenou, sdílejte ji s námi v komentářích.
Komentáře