Jeśli jesteś projektantem stron internetowych, błąd znany jakoByć może skonfrontowano się ze skalowaniem punktu widzenia na urządzeniach Apple, tj. IPodzie, iPhonie i iPadzie. Czasami, gdy obracamy urządzenie Apple z orientacji pionowej na poziomą, strona powiększa się, pokazując nam widok o szerokości większej niż szerokość urządzenia. Jest tak, ponieważ projektant ustawił szerokość rzutni na szerokość urządzenia. Aby pomóc Ci zrozumieć, jak działa ten błąd, zaprojektowaliśmy przykładową stronę i obróciliśmy iPada z widoku pionowego do poziomego.
Szybka poprawka dla wspomnianego błędu prowadzi nas do ustawienia„Maximum-scale = 1” w metatagu rzutni. To na razie rozwiązuje problem, ale strona nie jest już w stanie powiększać, ponieważ ustalamy maksymalną szerokość podobną do szerokości urządzenia.
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
Ta szybka poprawka nie jest idealnym rozwiązaniem. Dzięki ciężkiej pracy projektantów takich jak @mathias, @cheeaun i @jdalton mamy teraz javascript, który można dodać do sekcji <head> w celu uzyskania trwałego rozwiązania. W ramach tego rozwiązania strona będzie mogła być powiększana.
<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>Są to jedyne znane rozwiązania, które do tej pory wymyślili projektanci. Ale jeśli masz inny, aby naprawić ten błąd, udostępnij go nam w komentarzach.
Komentarze