Om du är webbdesigner kallas buggenSynpunkter skalning kan ha konfronterat dig som inträffar i Apple-enheter, t.ex. iPod, iPhone och iPad. Ibland, när vi roterar vår Apple-enhet från stående till liggande orientering, zoomar webbplatsen in och visar oss en vy med en bredd större än enhetens bredd. Det beror på att designern har ställt in visningsbredden på enhetens bredd. För att hjälpa dig få en uppfattning om hur detta fel fungerar designade vi en exempelsida och roterade vår iPad från porträtt till liggande.
En snabbkorrigering för nämnda fel guider oss att ställa in"Maximiskala = 1" i metataggen för visningsområdet. Detta löser problemet för tillfället men sidan är inte längre zoombar eftersom vi fixar den maximala bredden som liknar enhetens bredd.
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
Den här snabbfixen är inte exakt den perfekta lösningen. Genom hårt arbete från designers som @mathias, @cheeaun och @jdalton har vi nu ett javascript som kan läggas till i avsnittet <head> för att få en permanent lösning. Under den här lösningen förblir sidan 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>Detta är de enda kända lösningarna som designarna hittills har kommit fram till. Men om du har en annan att åtgärda felet, dela det med oss i kommentarerna.
kommentarer