Hvis du er en web-designer, er feilen kjent somSynspunktskalering kan ha konfrontert deg som oppstår på Apple-enhetene, dvs. iPod, iPhone og iPad. Noen ganger, når vi roterer Apple-enheten fra portrett til liggende retning, zoomer nettstedet inn, og viser oss en visning med en bredde større enn enhetsbredden. Dette fordi designeren har satt visningsbredden til enhetsbredden. For å hjelpe deg med å få en ide om hvordan denne feilen fungerer, designet vi en eksempelside og roterte iPad-en fra portrett til liggende.
En rask løsning for nevnte feil guider oss til å stille inn‘Maksimal skala = 1’ i metataggen for viewport. Dette løser problemet foreløpig, men siden er ikke lenger zoombar fordi vi fikser maksimal bredde som ligner bredden på enheten.
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
Denne hurtigløsningen er ikke akkurat den perfekte løsningen. Gjennom hardt arbeid fra designere som @mathias, @cheeaun og @jdalton, har vi nå et javascript som kan legges til <head> -delen for å få en permanent løsning. Under denne løsningen vil siden forbli zoombar.
<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>Dette er de eneste kjente løsningene designerne har kommet frem til så langt. Men hvis du har en annen til å fikse denne feilen, kan du dele den med oss i kommentarene.
kommentarer