Веб-сайт неправильно изменяет размеры на мобильном (метаданные установлены)

Question

Я настраиваю базовый веб-сайт, и когда я просматриваю его на мобильном устройстве, он открывается в увеличенном масштабе, вместо того, чтобы показывать полную ширину мобильного CSS (480px).

Я уже прошелНастройка мета правильно -

<meta name="viewport" content="width=device-width, user-scalable=0"/>

И я попытался сделать начальное увеличение, но это не работает.

Веб-сайт: http://scottstuart.co/hopkinsgroupwp/

Кто-нибудьзнаете, как это можно исправить?

Answer 1

Проблема в вашем метатеге.Вместо user-scalable=0 вы должны написать initial-scale=1.0.

Кроме того, я настоятельно рекомендую вам использовать единицы относительной длины, такие как%, vh и vw, вместо единиц абсолютной длины, таких как px.Это позволило бы контенту выглядеть одинаково на разных устройствах.

Answer 2

Поскольку метатег, которым вы делитесь с нами, говорит "сделайте ширину сайта равной ширине области просмотра устройства".

Затем ваш CSS говорит «сделайте этот div шириной 480px».

У браузера нет другого выбора, кроме как разместить на своем сайте горизонтальную полосу прокрутки для размещения принудительной ширины 480px.

РЕШЕНИЕ , две вещи ...

1) добавить это к значению метатега области просмотра:

initial-scale=1

2) Вероятно, вы должны перейти к width:100%в другом медиа-запросе, когда область просмотра меньше 480px.