В одному з останніх проектів потрібно було налаштувати зум на сторінці таким чином, щоб на великих екранах – основний контент був посередині (весь інший простір заповнював фон), а на маленьких – сайт брав найбільш доцільну ширину і вписував її в розміри екрану (зменшуючи). Власне все просто реалізувалось через задання статичної ширини основному блоку та його центрування. На ПК все чудово.
Дійшло діло до мобільних браузерів – полізли косяки. Спочатку був стандарний підхід з шаблону htm5:
<meta name="viewport" content="width=device-width, initial-scale=1">Але умова припасування взагалі не спрацьовувала – отже, не піде. Наступним кроком стало статичне задання ширини
<meta name="viewport" content="width=1200, initial-scale=1">На всіх андроїдах та iOS8 – ідеально. iOS7 – основний блок у значно меншому масштабі.
Кілька годин перечитував документацію використання цього мета-теґу – думав проблема у використанні, перепробував кучу комбінацій. Одні люди рекомендують вказувати ширину перед початковим зумом, інші – після, але використовувати інші лапки. Словом, вирішити проблему це не допомогло. Випадково наткнувся на статтю одного чоловіка, що тестував iOS 7 та жаліється на кучу підступних вад. Тут до мене почало доходити, що проблема конкретно для iOS7/6/5.
Після п’ятихвилинного спілкування з гуглом я знайшов сценарій Viewport Units Buggyfill на GitHub, який легко це виправляє.
Використання доволі просте:
<script src="viewport-units-buggyfill.js"></script>
<script>window.viewportUnitsBuggyfill.init();</script>Нестиснений JavaScript розміром 8Кб одразу все вирішив. А я стільки мучився…