Адаптивный веб-сайт увеличен до полной ширины на мобильном устройстве


139

Я тестирую панель навигации Bootstrap, и у меня есть демонстрационный веб-сайт. Когда я изменяю размер браузера на рабочем столе, все работает нормально, включая панель навигации, которая становится сворачиваемым меню с небольшим значком вверху, который я могу щелкнуть, чтобы увидеть больше кнопок меню.

Но когда я попробовал это в мобильном браузере (я пробовал в Chrome и в интернет-браузере на Android), я не увидел адаптивного дизайна. Я мог видеть только очень маленькую версию настольного компьютера, например веб-сайта.

Может ли кто-нибудь указать, что я делаю не так?

Ответы:


379

Добавьте это в свой HTML-код ..

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

Это сообщает браузерам небольших устройств, как масштабировать страницу. Подробнее об этом можно прочитать здесь: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html


1
Я добавил этот код в раздел head, но он не работает для моего интернет-
обозревателя

Я действительно не понимаю, почему у меня не работает. На одном сайте работают, а на другом - нет. И структура кода аналогична свежему бутстрапу
bheatcoker

1
@Skelly - Другие ответы, которые я видел опущенными maximum-scale, и использовал 1.0вместо них 1. Вы знаете, имеют ли эти вещи значение?
onebree 08

1
Ты спас меня :) Спасибо.
Fatih

1
Спасибо, два года спустя, ваш пост все еще шизнизл (так в оригинале) 😎
Уолт

17

как предлагается здесь http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

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

было бы еще лучшим выбором, так как он делает переход от портретной ориентации к пейзажной и обратно гораздо более приятным для пользователя, поскольку с / height будет естественно адаптироваться из-за возможного автоматического масштабирования.


Спасибо, это устранило проблему масштабирования на iPhone и по-разному (и правильно) отображает портретную и альбомную ориентацию.
SexxLuthor

0

Добавление этого для людей, ищущих эту ошибку, для которых принятый ответ не работает. Я считаю, что это будет более редкий, но, тем не менее, разочаровывающий случай:

Если ваша страница отображается внутри набора фреймов (например, маскировка домена), то размещение метатегов не поможет. Вам нужно будет разместить их на странице в домене маскировки, доступ к которому у вас может быть или не быть, в зависимости от вашего DNS-хоста.


0

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.