масштабирование мобильного веб-контента с использованием метатега области просмотра
Я пытаюсь понять, как использовать метатег мобильного окна просмотра для автоматического масштабирования содержимого HTML-страницы, чтобы оно соответствовало веб-представлению.
Ограничения:
- HTML может иметь или не иметь элементы фиксированного размера (ex img имеет фиксированную ширину 640). Другими словами, я не хочу делать контент плавным и использовать%.
- Я не знаю размера веб-просмотра, я просто знаю его соотношение сторон
Например, если у меня есть одно изображение (640x100 пикселей), я хочу, чтобы изображение было уменьшено, если веб-просмотр имеет размер 300x250 (масштаб до соответствовать). С другой стороны, если веб-просмотр составляет 1280x200, я хочу, чтобы изображение увеличивалось и заполняло веб-просмотр (масштабирование до соответствия).
После прочтения документации Android и документации iOS по окнам просмотра все кажется простым: поскольку я знаю ширину моего контента (640), я просто установил ширину области просмотра на 640 и позвольте веб-просмотру решить, нужно ли ему масштабировать контент вверх или вниз, чтобы соответствовать веб-просмотру.
Если я введу следующее в свой браузер Android / iPhone ИЛИ веб-просмотр 320x50, изображение не уменьшится до нужной ширины. Я могу прокручивать изображение вправо и влево ..
Test Viewport
Что я здесь делаю не так? Увеличивает ли метатег области просмотра только контент, который находится в