Als u een web-ontwerper bent, staat de bug bekend alsViewpoint Scaling kan u hebben geconfronteerd met wat zich op de Apple-apparaten voordoet, bijvoorbeeld iPod, iPhone en iPad. Soms, wanneer we ons Apple-apparaat van staande naar liggende stand draaien, zoomt de site in, waardoor we een weergave krijgen met een breedte die groter is dan de breedte van het apparaat. Dit komt omdat de ontwerper de viewport-breedte heeft ingesteld op de apparaatbreedte. Om u te helpen een idee te krijgen hoe deze bug werkt, hebben we een voorbeeldpagina ontworpen en onze iPad van staand naar liggend weergegeven.
Een snelle oplossing voor deze bug helpt ons bij het instellen van de‘Maximum-scale = 1’ in de viewport-metatag. Dit lost het probleem voorlopig wel op, maar de pagina kan niet meer worden ingezoomd omdat we de maximale breedte gelijk aan de breedte van het apparaat bepalen.
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
Deze snelle oplossing is niet echt de perfecte oplossing. Door het harde werk van ontwerpers zoals @mathias, @cheeaun en @jdalton hebben we nu een javascript dat kan worden toegevoegd aan de sectie <head> om een permanente oplossing te krijgen. Met deze oplossing blijft de pagina zoombaar.
<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>Dit zijn de enige bekende oplossingen die de ontwerpers tot nu toe hebben bedacht. Maar als je een andere hebt om deze bug op te lossen, deel het dan met ons in de comments.
Comments