2

Добрый вечер! Возникла проблема верстки под разные разрешения экранов. Дело в то, что сейчас у телефонов (андроидов допустим) разрешения доходят и до 1280px, и поэтому пришлось прописать под 1280px медиа запрос, так как на компьютерах все хорошо отображает по верстке, а с телефона криво в некоторых местах. Но при 1280px на мониторах компьютера начинают тоже подключаться стили (а они нужны только для телефонов), как-то можно избежать этого? Ну то есть, чтобы медиа запросы работали только для телефонов.

2
  • Скрывать ненужные элементы как вариант ) bootstrap отличный тому пример.
    – Bastian
    2 янв 2015 в 12:46
  • @Bastian, не знаком с bootstrap. А огранить можно это в <meta name="viewport" content="width=device-width" />. Сделать только для телефонов.
    – Alextrue
    2 янв 2015 в 12:57

4 ответа 4

1

Попробуйте такую штуку: http://matthewhudson.me/projects/device.js/ Навешивает на html классы с устройством, в реальном времени отслеживая ориентацию.

И да прописывать:

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

НЕ КОРРЕКТНО, тк запрещая "юзер-скейл" вы прямо мешаете пользовательскому сценарию но тем самым "сглаживаете углы" вашей некорректно вёрстки. Я применяю следующую строку:

<meta name="viewport" content="width=640" />

Где 640 корректное разрешение под которое делалась адаптивная\мобильная вёрстка. При таком раскладе устойство само корректно растянет контент на свой экран.

А ещё иногда нужно чтобы на планшетах отображалась десктопная версия, тогда JS детектим устройства и меняем вьюпорт вручную, на примере моего device.js выглядит так:

if (device.ipad()) { $('meta[name="viewport"]').attr('content','width=1280'); }

Где 1280 минимальное родное разрешение для десктопа, читай "минимальная ширина враппера". Удачи!

1
  • @Олег Б, Большое спасибо)
    – Alextrue
    6 янв 2015 в 20:39
1

Про то, что размеры дисплеев доходят до 1280px - это все враки проклятых маркетологов. У последней Xperia, если не ошибаюсь, вообще 1920х1080. Представьте себе сайт открытый на таком 1920x1080 мониторе с диагональную в 23 дюйма, а потом его же на телефоне размером с корейский сами знаете что. Если бы там было честных 1920х1080 вы бы ни одной иконки разобрать не смогли.

С появлением дисплеев типа ретины нужно научиться разделять софтварные и хардварные пиксели. Давайте сравним iPhone 3 и iPhone 4 - хороший пример. У первого разрешение 320х480, у второго 640х960. Тем не менее какой бы сайт вы ни открыли, адаптивный, не адаптивны, мобильную, десктопную версии - все они будут выглядеть попарно одинаковыми. Сработают одни и теже медиа-запросы.

Дело в том на третьем айфоне один софтварный пиксель равен одному хардварному. А на четвертом один софтварный равен уже четырем хвардварным. Т.е. вдвое больше пикселей по горизонтали и по вертикали. От этого и вдвое большее разрешение.

Есть параметр, называется он "плотность пикселя" (pixel density если не ошибаюсь). Так вот до времен ретины он всегда был равен 1. У дисплеев ретина он равен уже 2, что означает в четыре раза больше пикселей. У иксперии 1920х1080, рискну предположить, он равен 3, т.е. девять пикселей на один софтварный. Соответствено софтварное разрешение 640х360.

Внутренее чувство подсказывает мне, что этот парметр должен быть целочисленным, но например у моей xperia m2 он равен 1.5. При хардварном 960х540 я имею софтварное 640х360. Кстати, получается такое же как у последней иксперии. Все сходится. Как уже тут пиксели конвертируются не особо понятно. Экзотика.

Тем не менее матчасть работает прекрасно. Мы ВСЕГДА работаем с софтварными пикселями и хардварные нас волновать вообще не должны. Выдыхайте. Тем на сколько хардварных пикселей рендерится один софтварный занимается браузер, операционка, монитор - точно не знаю, но кто-то из них. Точно не мы.

Могу вас заверить, что телефонов шире чем 480px (если держать вертикально) нет и врядли появяться. Мелко же будет. Только если лопаты размером с планшет. Вот: http://screensiz.es/phone смотрите столбец device-w px, напрмиер. Это софтварные ширины.

Аналогичная ситуация с компами. У одних макбуков 1440 ширина, а у других 2880. Тем не менее и те и другие работают с 1440. Можете поставить какой-нибудь старенький виндоус на аймак с ретиной и поймете о чем я говорю :)

Единственный момент, который нас касается во всем этом - это растровая графика и видео. Тут уже ничего не поделаешь. Это все выглядит размытым уже даже при плотности в 1.5. К счастью есть медиазапросы и для этого. Как-то так: (min-device-pixel-ratio: 1.5) {} (min-device-pixel-ratio: 2) {} К несчастью резать 3-4 пкета графики слишком геморройно и с синтаксисом там какая-то жуть. К счастью есть SVG и прочие.

1
  • @Cypher, спасибо)
    – Alextrue
    6 янв 2015 в 20:40
1

у Yandex есть спец штука https://tech.yandex.ru/detector/ аналог http://matthewhudson.me/projects/device.js/

0

Во-первых пропишите в head вот такую строчку:

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

Ну а во вторых с помощью JavaScript узнайте размер экрана. Оно будет меньше, чем реальное количество пикселей девайса. На моем Sony Xperia S с 720px по ширине эмулировалось как 360px.

Вы просто представьте, как бы выглядели сайты, если бы пиксели на смартфонах были один к одному, с учетом того что их не разглядеть даже :D

UPD. Отредактировал meta тег, как пологается

4
  • @inferusvv, Подскажите еще пожалуйста как в CSS прописать правильно - @media..... { ... }
    – Alextrue
    2 янв 2015 в 18:30
  • @Alextrue Вот так: @media all and (min-width: 768px) { // стили } Брэйкпоинты возьмите как у бутсрапа, например
    – acidernt
    3 янв 2015 в 11:15
  • @inferusvv, не работает, не применяются стили, если написать max-width, то работает, но для компьютера тоже срабатывает
    – Alextrue
    3 янв 2015 в 15:40
  • а что вы пишите и где проверяете? Еще раз на помню, что если вы напишите min-width: 768px, а разрешение экрана вашего телефон 1280px в ландшафтном режиме, то стили не применятся, потому что размер экрана эмулируется в зависимости от всяких пикселей на дюйм и т.п., как сказано в ответе ниже
    – acidernt
    4 янв 2015 в 10:45

Ваш ответ

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

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