Якщо ви веб-дизайнер, помилка відома якМасштабування точки зору, можливо, зіткнулося з вами, що відбувається на пристроях 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>Це єдині відомі рішення, які дизайнери придумали поки що. Але якщо у вас є інший виправити цю помилку, діліться нею з нами у коментарях.
Коментарі