Я работаю над полу-отзывчивым веб-дизайном, который адаптируется (реагирует) на любую ширину экрана, превышающую 480px .Тем не менее, мой макет не может адаптироваться к ширине экрана под 480px.Ниже этой точки я бы хотел, чтобы мобильное устройство проявило магию и уменьшило содержимое страницы (уменьшило его), чтобы оно соответствовало ширине устройства без необходимости горизонтальной прокрутки.
Я прочитал оба Android и IOs документация по метатегу ViewPort и пробовал много разных комбинаций.Приведенный ниже код позволит адаптивному поведению макета «работать» , если он выше 480px , а затем он будет уменьшен для соответствия ширине экрана , если ниже 480p , как и ожидалось.
<meta name="viewport" content="width=480">
Однако, если пользователь применяет масштабирование, он сохранит это состояние для текущего окна мобильного браузера и горизонтальная прокрутка будет показана и не исчезнет, если пользователь не уменьшит вручную .Он не будет сброшен до ожидаемого увеличения, даже если пользователь перезагрузит страницу.По крайней мере, это поведение при тестировании на iPhone .Я не знаю, где его протестировать для разных Android разрешений.
<meta name="viewport" content="width=480, initial-scale=1">
Если я добавлю initial-scale , как показано выше, масштаб будет сброшенкогда страница перезагружается, но поскольку она установлена в 1, она не будет уменьшаться, чтобы соответствовать ширине устройства без горизонтальной прокрутки. Вместо этого он будет иметь ширину 100% (480 пикселей) и будет показывать горизонтальную прокрутку на экранах под этим разрешением.
Я хотел бы больше узнать о ViewPort поведении метатегана разных устройствах на основе его атрибутов, поэтому я могу быть уверен, что получу ожидаемые результаты на всех устройствах и разрешениях.В этом случае я хочу, чтобы он работал быстрее 480px и позволял мобильному устройству уменьшать его ниже, чтобы оно соответствовало ширине устройства без горизонтальной прокрутки.Можно ли это сделать, используя только метатег ViewPort ?Если нет, я бы предпочел решение, не используя библиотеку JS, если это возможно.