Hvis du er en web-designer, er bug kendt somSynspunktskalering kan have konfronteret dig, der forekommer på Apple-enhederne, dvs. iPod, iPhone og iPad. Nogle gange, når vi roterer vores Apple-enhed fra stående til liggende retning, zoomes webstedet ind og viser os en visning med en bredde, der er større end enhedens bredde. Dette skyldes, at designeren har indstillet visningsbredde til enhedens bredde. For at hjælpe dig med at få en idé om, hvordan denne fejl fungerer, designede vi en eksempelside og roterede vores iPad fra portræt til liggende.
En hurtig løsning til nævnte bug hjælper os med at indstille'Maksimal skala = 1' i metatagget for visningen. Dette løser problemet i øjeblikket, men siden er ikke længere zoombar, fordi vi løser den maksimale bredde svarende til enhedens bredde.
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
Denne quick-fix er ikke nøjagtigt den perfekte løsning. Gennem hårdt arbejde fra designere som @mathias, @cheeaun og @jdalton har vi nu et javascript, der kan tilføjes til afsnittet <head> for at få en permanent løsning. Under denne løsning forbliver siden 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 kendte løsninger, som designerne er kommet frem til indtil videre. Men hvis du har en anden til at ordne denne fejl, så del den med os i kommentarerne.
Kommentarer