Jos olet web-suunnittelija, vika tunnetaan nimelläNäkökulman skaalaus on saattanut kohdata sinua Apple-laitteissa, ts. IPodissa, iPhoneissa ja iPadissa. Joskus, kun kiertämme Apple-laitetta pystysuunnasta vaakasuuntaan, sivusto zoomaa sisään, jolloin meille näkymä on leveämpi kuin laitteen leveys. Tämä johtuu siitä, että suunnittelija on asettanut näyttökentän leveyden laitteen leveyteen. Suunnittelemme mallisivun ja käänsimme iPadin pystysuuntaisesta maisemakuvaan auttaaksemme sinua ymmärtämään tämän virheen toimivuutta.
Mainitun virheen pikakorjaus opastaa meitä asettamaan'Maximum-scale = 1' näkymästä näyttöportin metatunnisteessa. Tämä korjaa ongelman toistaiseksi, mutta sivua ei enää voi zoomata, koska vahvistamme enimmäisleveyden, joka vastaa laitteen leveyttä.
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
Tämä pikakorjaus ei ole aivan täydellinen ratkaisu. Suunnittelijoiden kuten @mathias, @cheeaun ja @jdalton suunnittelijoiden kovan työn avulla meillä on nyt javascript, joka voidaan lisätä <head> -osaan saadaksemme pysyvän ratkaisun. Tämän ratkaisun mukaisesti sivu pysyy zoomauskykyisenä.
<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>Nämä ovat ainoat suunnitellut ratkaisut, jotka suunnittelijat ovat tähän mennessä keksineet. Mutta jos sinulla on toinen korjataksesi tämä virhe, jaa se kanssamme kommentteihin.
Kommentit