Добрый вечер! Возникла проблема верстки под разные разрешения экранов. Дело в то, что сейчас у телефонов (андроидов допустим) разрешения доходят и до 1280px, и поэтому пришлось прописать под 1280px медиа запрос, так как на компьютерах все хорошо отображает по верстке, а с телефона криво в некоторых местах. Но при 1280px на мониторах компьютера начинают тоже подключаться стили (а они нужны только для телефонов), как-то можно избежать этого? Ну то есть, чтобы медиа запросы работали только для телефонов.
4 ответа
Попробуйте такую штуку: 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 минимальное родное разрешение для десктопа, читай "минимальная ширина враппера". Удачи!
Про то, что размеры дисплеев доходят до 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 и прочие.
у Yandex есть спец штука https://tech.yandex.ru/detector/ аналог http://matthewhudson.me/projects/device.js/
Во-первых пропишите в head вот такую строчку:
<meta name="viewport" content="width=device-width, initial-scale=1">
Ну а во вторых с помощью JavaScript узнайте размер экрана. Оно будет меньше, чем реальное количество пикселей девайса. На моем Sony Xperia S с 720px по ширине эмулировалось как 360px.
Вы просто представьте, как бы выглядели сайты, если бы пиксели на смартфонах были один к одному, с учетом того что их не разглядеть даже :D
UPD. Отредактировал meta тег, как пологается
-
@inferusvv, Подскажите еще пожалуйста как в CSS прописать правильно - @media..... { ... }– Alextrue2 янв 2015 в 18:30
-
@Alextrue Вот так: @media all and (min-width: 768px) { // стили } Брэйкпоинты возьмите как у бутсрапа, например– acidernt3 янв 2015 в 11:15
-
@inferusvv, не работает, не применяются стили, если написать max-width, то работает, но для компьютера тоже срабатывает– Alextrue3 янв 2015 в 15:40
-
а что вы пишите и где проверяете? Еще раз на помню, что если вы напишите min-width: 768px, а разрешение экрана вашего телефон 1280px в ландшафтном режиме, то стили не применятся, потому что размер экрана эмулируется в зависимости от всяких пикселей на дюйм и т.п., как сказано в ответе ниже– acidernt4 янв 2015 в 10:45