Почему минимальная ширина CSS приводит к увеличению масштаба моего адаптивного сайта на мобильном устройстве?

Question

Я создаю адаптивный веб-сайт, и у меня возникла проблема с ним, что означает, что когда я смотрю его на мобильном телефоне, он автоматически увеличивается на небольшое количество. Я могу уменьшить масштаб, чтобы просмотреть всю ширину страницы, но когда я нажимаю на ссылку на другую страницу, новая страница также загружается с небольшим увеличением (возможно, на 10% или около того).

Я установил соответствующий видовой экран, который должен иметь дело с проблемой:

<meta name="viewport" content="width=device-width, initial-scale=1" />

Я также установил минимальную ширину тела, что необходимо, так как ниже этой ширины макет сайта ломается:

body {
    min-width: 400px;
}

Без минимальной ширины сайт отлично работает на мобильных устройствах, но с минимальной шириной загрузка страниц немного увеличивается. Я пробовал это на Chrome и на обычном браузере на Android (на Galaxy S3 и Galaxy Nexus) с результаты те же, так что, похоже, я что-то неправильно понимаю, а не обнаружил ошибку.

В конечном итоге я хочу, чтобы сайт был полностью уменьшен (initial-scale=1) и минимальная ширина экрана была установлена ​​на 400px, поэтому мне не нужно беспокоиться о макетах при более узкой ширине. Это даже достижимо?

Answer 1

Ладно, мне удалось найти адекватное решение этой проблемы. Проблема в том, что я установил область просмотра на ширину устройства, что, как правило, кажется хорошим решением.

Проблема возникает, когда ширина устройства меньше минимальной ширины, установленной для моего сайта (в данном случае 400 пикселей). Так, например, если ширина устройства составляет 320 пикселей, область просмотра устанавливается на эту ширину, в результате чего веб-страницы становятся на 80 пикселей слишком большими для экрана мобильного устройства.

Решением является некоторый JavaScript для изменения ширины области просмотра с device-width на 400 в случаях, когда ширина окна меньше или равна 400 пикселям. Этот фрагмент кода решает проблему:

<meta id="myViewport" name="viewport" content="width=device-width" />
    <script>
        window.onload = function () {
            if(window.innerWidth <= 400) {
                var mvp = document.getElementById('myViewport');
                mvp.setAttribute('content','width=400');
            }
        }
     </script>

Answer 2

Вы можете использовать это, чтобы предотвратить масштабирование.

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

Но я не думаю, что это хорошая идея сохранить

body
{
   min-width: 400px;
}

потому что содержимое будет переполнено в меньшем окне просмотра. Ваша проблема с масштабированием может быть из-за комбинации

body
{
   min-width: 400px;
   overflow: hidden;
}

так что кажется, что он увеличен.