- - Ispravite programski uređaj Apple Sfari Viewport Scaling Bug [Kako]

Popravite program Apple Sfari Viewport Scaling Bug [Kako da]

Ako ste web dizajner, bug je poznat kaoSkaliranje gledišta moglo bi se suočiti s vama što se događa na Appleovim uređajima, tj. IPodu, iPhoneu i iPadu. Ponekad, kada svoj Apple uređaj zakretamo iz okomitog u pejzažni položaj, web-lokacija zumira, prikazujući nam pogled koji ima širinu veću od širine uređaja. To je zato što je dizajner postavio širinu prikaza na širinu uređaja. Da bismo vam pomogli da steknete ideju o tome kako radi ova buba, osmislili smo oglednu stranicu i rotirali naš iPad od portreta do pejzažnog prikaza.

okomiti uzorak

uzorak pejzaža - Kopiraj

Brzi ispravak za navedenu bug vodi nas prema postavljanju"Maksimalna skala = 1" u metaoznaci za prikaz. To za sada popravlja problem, ali stranica se više ne može zumirati jer fiksiramo maksimalnu širinu sličnu širini uređaja.

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

Ovo brzo ispravljanje nije baš savršeno rješenje. Kroz naporan rad dizajnera poput @mathias, @cheeaun i @jdalton, sada imamo javascript koji se može dodati u odjeljak <head> kako bismo dobili trajno rješenje. U skladu s ovim rješenjem, stranica će i dalje moći zumirati.

<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>

Ovo su jedina poznata rješenja koja su dizajneri dosad smislili. Ali ako imate još jedan koji će riješiti ovaj bug, podijelite ga s nama u komentarima.

komentari