Ja esat tīmekļa dizainers, kļūda pazīstama kāIespējams, jūs esat saskāries ar skata punkta mērogošanu, kas notiek Apple ierīcēs, ti, iPod, iPhone un iPad. Dažreiz, kad mēs pagriežam savu Apple ierīci no portreta uz ainavas orientāciju, vietne pietuvina, parādot mums skatu, kura platums ir lielāks par ierīces platumu. Tas ir tāpēc, ka dizainers ir iestatījis skata lauka platumu uz ierīces platumu. Lai palīdzētu jums gūt priekšstatu par šīs kļūdas darbību, mēs izstrādājām lapas paraugu un pagriezām mūsu iPad no portreta uz ainavas skatu.
Minētās kļūdas ātrs labojums palīdz mums iestatīt“Maximum-scale = 1” skata porta metatagā. Pagaidām problēma tiek novērsta, taču lapa vairs nav pietuvināta, jo tiek noteikts maksimālais platums, kas līdzīgs ierīces platumam.
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
Šis ātrais labojums nav īsti ideāls risinājums. Paveicot smagu darbu tādiem dizaineriem kā @mathias, @cheeaun un @jdalton, tagad mums ir javascript, kuru var pievienot sadaļai <head>, lai iegūtu pastāvīgu risinājumu. Saskaņā ar šo risinājumu lappuse joprojām tiks pietuvināta.
<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>Šie ir vienīgie zināmie risinājumi, ar kuriem dizaineri līdz šim ir nākuši klajā. Bet, ja jums ir vēl viens, kurš novērš šo kļūdu, dalieties tajā ar mums komentāros.
Komentāri