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));
});

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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