Ако сте уеб дизайнер, грешката известна катоМащабирането на гледна точка може да ви е изправено, което се случва в устройствата на Apple, т.е. iPod, iPhone и iPad. Понякога, когато въртим устройството си Apple от портретна към пейзажна ориентация, сайтът увеличава, показвайки ни изглед с ширина, по-голяма от ширината на устройството. Това е така, защото дизайнерът е задал ширината на прозореца на ширината на устройството. За да ви помогнем да добиете представа как работи тази грешка, ние създадохме примерна страница и завъртяхме iPad от портрет към пейзажен изглед.
Бързо поправяне на споменатия бъг ни ръководи да настроим„Максимален мащаб = 1“ в мета маркера на прозореца. Това засега решава проблема, но страницата вече не може да се увеличава, защото фиксираме максималната ширина, подобна на ширината на устройството.
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
Тази бърза корекция не е точно идеалното решение. Благодарение на упоритата работа на дизайнери като @mathias, @cheeaun и @jdalton, сега имаме javascript, който може да бъде добавен към секцията <head>, за да получим постоянно решение. При това решение страницата ще остане мащабирана.
<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>Това са единствените известни решения, които дизайнерите са измислили досега. Но ако имате друг, който да коригира тази грешка, споделете я с нас в коментарите.
Коментари