Ak ste webdizajnér, chyba je známa akoZmena mierky pohľadu vás mohla postaviť pred zariadenia Apple, t. J. IPod, iPhone a iPad. Niekedy, keď otočíme naše zariadenie Apple z orientácie na výšku na orientáciu na šírku, sa stránka priblíži a ukáže nám pohľad so šírkou väčšou ako je šírka zariadenia. Dôvodom je, že návrhár nastavil šírku výrezu na šírku zariadenia. Aby sme vám pomohli získať predstavu o tom, ako táto chyba funguje, navrhli sme vzorovú stránku a otočili sme náš iPad z zobrazenia na výšku na šírku.
Rýchla oprava tejto chyby nás vedie k nastaveniu„Maximum-scale = 1“ v metaznačke výrezu. V súčasnosti sa tým problém nevyrieši, ale stránka sa už nedá zväčšiť, pretože opravujeme maximálnu šírku podobnú šírke zariadenia.
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
Táto rýchla oprava nie je presne tým najlepším riešením. Vďaka tvrdej práci dizajnérov, ako sú @mathias, @cheeaun a @jdalton, máme teraz javascript, ktorý je možné pridať do časti <head>, aby sme získali trvalé riešenie. Podľa tohto riešenia zostane stránka naďalej zväčšiteľná.
<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>Toto sú jediné známe riešenia, s ktorými dizajnéri doteraz prišli. Ak však máte túto chybu opravenú, v komentároch ju s nami zdieľajte.
Komentáre