Как в css получить width для body с учетом viewport?
Для сайта указана viewpoint как
для html и body применено
min-width: 1000px;
width: 100%;
Сайт отображается как надо на всех устройствах. Но если в body положить div у которого width: 100% то на устройствах с шириной экрана, меньшей 1000px ширина div установится в меньшую ширину.
Т.е. ширина экрана - 640px, сайт занимает весь экран, но наш div занимает ~ 2/3 экрана (как 640px на экране в 1000px).
В дебагере видно, что html, body и наш div занимают именно эту ширину.
Сайт отображается нормально оттого, что он весь лежит во врапперах, у которых width: 1000px;
Что можно поменять во viewpoint или css, чтобы 100% занимали весь экран?
Должен извиниться.
Для случая, когда width: 100%; указано у элемента с абсолютным позиционированием такой баг и правда присутствует и решается position: relative у body.
jsfiddle
там не применишь viewport
смотри www.zdravzona.ru/delivery
Чтобы увидеть баг в chrome включи эмуляцию nexus 5 например или сразу на мобильнике зайди и нажми на карту. Да и сразу в отладчике видно, что body занимает сильно меньше места.
Это такой баг отображения в хроме. Ты убери у body min-width и поставь его для .wrap. И width=device-width не нужен там тебе, у тебя же не адаптив. Лучше вставь туда initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0 если хочешь что бы у тебя контент 100% размера при загрузке страницы.
Oleg Vavilov:
initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0
Это приведет только к тому, что на экранах меньше 1000px в ширину пользователь не увидит весь сайт и не сможет изменить масштаб.
width=device-width
это как-раз для того, чтобы на маленьких экранах пользователь видел весь сайт.
Простой
Средний