Почему возникает разное отображение в мобильных версиях браузеров chrome и firefox?

Question

[Константин Коваленко]

Открыв сайт в chrome на телефоне я обрадовался и был счастлив, пока не увидел сайт в firefox:
ChromeFirefox
В чём может быть причина? Использую

meta name="viewport" content="width=device-width, initial-scale=0.6"

Для сравнения, сайт firefox dev отображается нормально:
ChromeFirefox

Answer 1

[Александр Цымбал]

дело в initial scale:
На сайте Mozzilla dev есть такой код:

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

А у вас initial-scale=0.6.

Не знаю, зачем вы использовали именно это значение, если намеренно, то придётся доверстывать вашу сайт под более узкие ширины. Для начала просто поставьте initial-scale=1.0, а также допишите maximum scale, minimum scale.

Comments

[Константин Коваленко]

Тут самое интересное: хоть initial-scale=1.0, хоть initial-scale=0.6, всё-равно выглядит одинаково. А вот 0.6 - для отображения в chrome, если 1.0, то будет как в mozilla.

[Александр Цымбал]

Константин Коваленко: попробуйте удалить firefox с вашего устройства, или сбросьте настройки на дефолтные (если это возможно)... я делал недавно сайт с initial-scale=0.66, dorstroyproekt.com - проверьте этот сайт в ваших устройствах и браузерах. Если ошибка в FF повторится, значит проблема в firefox, но у меня (я тестил месяцев 5 назад, когда разрабатывал) все показывалось хорошо во всех браузерах.
Возможно в новых версиях ff что-то изменилось.

Также не забудьте указать max/min-scale - возьмите за образец строку с dorstroyproekt.com.

[Константин Коваленко]

Александр Цымбал: Поставил initial-scale как у вас, переустановил firefox - всё без толку. P. S.: Ваш сайт отображается нормально.

[Константин Коваленко]

Александр Цымбал: но если поставить width=600 пикселей, то всё нормально. Довольно странно. Ещё страннее то, что firefox (делал alert($(window).width)) 980 пикселей (разрешение экрана), хотя окно явно менбше. Хром показывает настоящее разрешение окна.

[Александр Цымбал]

Константин Коваленко: с мобильными браузерами вообще беда в плане viewport. У каждого свои настройки. Поэтому лучше проставлять width=device-width и стараться адаптировать до минимальной ширины 320px. Желаю удачи в адаптивной верстке.

[Константин Коваленко]

Александр Цымбал: спасибо, в будущих проектах буду подходить основательнее!

Answer 2

[Артемий Малков]

В стилях для мобильной версии присвойте в css для body {min-width: 480px;} (для примера) мне помогает.