2

Здравствуйте. Никому не секрет, что, несмотря на высокое разрешение экранов мобильных девайсов, в браузере мобильных устройств отображается верстка других размеров. Так, к примеру, у 7 айфона с его fullhd экраном отображается верстка на 375 пикселей. Я сделал сайт и понял, что минимальная ширина моего сайта составляет 533 пикселя. Дальше верстать смысла нет, ибо весь смысл сайта рушится. Таким образом, у меня media only screen and (min-width : 533px) . Но если в браузере (в режиме инспектора) открыть мой сайт в режиме iphone 7, то сайт будет некорректно отображаться, так как у него размер меньше, чем 533.

Подскажите, как сделать, чтобы устройства, у которых при рендеринге (либо своё родное) разрешение меньше 533 отображали верстку на 533?

4
  • 1
    Эм, ну, убрать media? Я как-то не понял вопроса
    – andreymal
    3 июл 2017 в 21:53
  • У iPhone 7 ширина больше 533px.
    – Alex78191
    3 июл 2017 в 22:55
  • А всё же, доверстать адаптив, сделав его до 320px - нельзя, или дизайн рассчитан исключительно на 533+px? Вы ведь отрезаете себе аудиторию, недоработав адаптивность. 5 июл 2017 в 8:54
  • + человек может и не с мобильника заходить, а открыть себе кучу маленьких окошек на компе, что тоже скажется на внешнем виде сайта 5 июл 2017 в 8:55

2 ответа 2

0

В вашем случае, чтобы устройства нормально отображали вашу вёрстку на экранах с размерами не больше 533-х пикселей, вам нужно писать в @media запросе не min-width : 533px , а max-width : 533px. Это значит, что устройства с максимальной шириной экрана 533 пикселя и меньше, будут читать стили из вашего @media запроса.

Плотность пикселей экрана здесь не играет роли.

0

Здесь чистый Media запрос не поможет. Решается данная задача с помощью костыля: Добавляем viewport'y ID, а потом добавляем вот такой jquery код.

if (screen.width < 533) {
$('#viewport').attr('content', 'width=533, initial-scale=' + (screen.width / 533).toFixed(4));
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.