Как правильно определить разрешения экрана

[alleclf]

Замучился с адаптивным дизайном. Наконец-то понял почему разрешение на мобильных устройствах занижается.

Вот тут хорошая статья http://programador.ru/dp/

 

Вот нашел скрипт, но он определяет "devicePixelRatio" - это для ретины, да и не работает он, на мобилке сайт зависает при загрузке - просто белый фон и делает вид что что-то грузит

<script>$(function() {if (window.devicePixelRatio !== 1) {  var dpt = window.devicePixelRatio;  var widthM = window.screen.width * dpt;  var widthH = window.screen.height * dpt;  document.write('<meta name="viewport" content="width=' + widthM+ ', height=' + widthH + '">');}}) </script>

Скажите пожалуйста, как можно переделать скрипт чтобы переопределить разрешение экрана.

 

В статье (ссылка выше) формула есть, не пойму как определить dp-устройства и заставить устройство правильно определить разрешение экрана.

[Great Rash]

Что-то вы мудрите. Ничего нигде не занижается. 1dp === 1px.

[Yazon_Nile]

Ага. Весь мир не осознает такой глобальной ошибки ))

[alleclf]

  On 2/24/2015 at 3:28 PM, Great Rash said:

Что-то вы мудрите. Ничего нигде не занижается. 1dp === 1px.

почему тогда мой мобильник распознается как 320х480, хотя реальное разрешение 480х854

соответственно грузятся не те стили и всё на экране увеличенное.

 

Даже при перевороте мобилки с портретной ориентации в ландшафтную всё еще сильней увеличивается, так как

- в вертикальной ориентации разрешение не 480 а 320 - коэффициент 1.5

- в горизонтальной не 854 а 480 - коэффициент 1.7

[Great Rash]

  On 2/24/2015 at 4:53 PM, alleclf said:

почему тогда мой мобильник распознается как 320х480, хотя реальное разрешение 480х854

Потому что минимальная плотность пикселя 1.5. Если вам нужны специфические стили для телефона с такой плотностью пикселя, то и опрашивайте плотность напрямую в CSS.

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),       only screen and (-moz-min-device-pixel-ratio: 1.5),       only screen and (-ms-min-device-pixel-ratio: 1.5),       only screen and (-o-min-device-pixel-ratio: 1.5),       only screen and (min-device-pixel-ratio: 1.5) {  /* бла бла бла */}

То, что вы скриптом пытаетесь менять размеры вьюпорта - настоящее извращение. Просто установите значение мета-тега в device-width, а высоту вообще трогать не надо - пусть вычислится автоматом.

[li4e]

http://frontender.com.ua/mobile-web/wtf-viewport/

[alleclf]

  On 2/25/2015 at 8:11 AM, Great Rash said:

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),       only screen and (-moz-min-device-pixel-ratio: 1.5),       only screen and (-ms-min-device-pixel-ratio: 1.5),       only screen and (-o-min-device-pixel-ratio: 1.5),       only screen and (min-device-pixel-ratio: 1.5) {  /* бла бла бла */}

 

я могу так написать, но разве это изменит разрешение экрана? Оно как было меньше так и останется.

[Great Rash]

1) Вы не можете изменить разрешение экрана.

2) Непонятно для чего вам понадобилось менять его?

[alleclf]

  On 2/25/2015 at 9:19 AM, Great Rash said:

1) Вы не можете изменить разрешение экрана.

2) Непонятно для чего вам понадобилось менять его?

Экран 480х854 определяется как 320х480, надо как-то указать это браузеру, device-width берет именно 320пх а не 480.

 

Все иконки на экране увеличенные и выглядят размыто. Если я вручную укажу во вьюпорте width=480 страничка грузится как надо и выглядит отлично.

 

Я пытаюсь найти универсальное решение, под любые экраны. И скрипт из первого поста с этим справляется. Единственный минус - при смене ориентации страничка просо растягивается, вроде как 480пх растянуть на 854пх и надо либо перегрузить страничку либо перейти по ссылки на другую.

Edited February 25, 2015 by alleclf

[antonKar]

Верстайте под 320 пикселей, так на всех мобилках, что на айфонах, что на андроидах.

 

 

  On 2/25/2015 at 9:34 AM, alleclf said:

Экран 480х854 определяется как 320х480, надо как-то указать это браузеру, device-width берет именно 320пх а не 480.

 

Все иконки на экране увеличенные и выглядят размыто.

 

 

А если будет иное разрешение экрана? Что будете делать?

 

Иконки надо делать либо в 2 раза больше, либо делать через svg.

Edited February 25, 2015 by antonKar

[alleclf]

  On 2/25/2015 at 9:36 AM, antonKar said:

Верстайте под 320 пикселей, так на всех мобилках, что на айфонах, что на андроидах.

 

 

  On 2/25/2015 at 9:34 AM, alleclf said:

Экран 480х854 определяется как 320х480, надо как-то указать это браузеру, device-width берет именно 320пх а не 480.

 

Все иконки на экране увеличенные и выглядят размыто.

 

 

А если будет иное разрешение экрана? Что будете делать?

 

Иконки надо делать либо в 2 раза больше, либо делать через svg.

 

я сверстал уже много, под разные разрешения, всё работает но не так как я ожидал. Сейчас тестирую скрипт на разных устройствах. С андроидом проблем нет. Пытаюсь найти айФон и что-нибудь с ВиндовзФоном.

[Great Rash]

  On 2/25/2015 at 9:39 AM, alleclf said:

Все иконки на экране увеличенные и выглядят размыто.

Потому что размер иконки надо задавать явно и открыть для себя свойство background-size. Вот вам тестовая страница, откройте её на своём мобильнике и вы увидите что там будет всё ок без скриптов и других извращений.

<!doctype html><html><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">    <title>Нормальная иконка без извращений</title>  <style>    .icon-test {      display: inline-block;      vertical-align: middle;            width: 128px;      height: 128px;      background: url('https://cdn1.iconfinder.com/data/icons/freeline/32/alarm_alert_clock_event_history_schedule_time_watch-128.png') 50% no-repeat;      background-size: 100% 100%;    }    @media only screen and (-webkit-min-device-pixel-ratio: 1.5),           only screen and (-moz-min-device-pixel-ratio: 1.5),           only screen and (-ms-min-device-pixel-ratio: 1.5),           only screen and (-o-min-device-pixel-ratio: 1.5),           only screen and (min-device-pixel-ratio: 1.5) {      .icon-test { background-image: url('https://cdn1.iconfinder.com/data/icons/freeline/32/alarm_alert_clock_event_history_schedule_time_watch-256.png'); }    }  </style></head><body>  <p>    <span class="icon-test"></span>  </p></body></html>

[alleclf]

Great Rash, хорошо, попробую напишу

[alleclf]

Вот результат с моей мобилки

 
на первом скрине чистый код предложенный Great Rash, на втором я в head дописал свой скрипт из первого поста.

 

Размер блока в коде указан в 128пх, очень хорошо видно что в первом варианте там около 200пх, а вот во втором как-раз 128пх!

 

О чём я и говорил - без скрипта разрешение экрана не правильно определяется. Правильно будет только на устройствах с PixelRatio = 1.

[Switch74]

вы понимаете для чего на мобильных устройствах введен параметр PixelRatio?
Это сделано для того, чтобы на маленьких устройствах объекты были увеличены ибо читать на них текст было бы не возможно.

Если вам хочется, чтобы все было мелко и располагалось как на десктопах, то это не самая хорошая идея.

[alleclf]

Switch74, так я и сделал дизайн под разные разрешения, где всё нормального удобного размера. А теперь из-за этого PixelRatio всё получается слишком большим.

[Switch74]

а как вы делали под разные разрешения? Если увеличивали что-то, а потом у вас из-за PixelRatio еще увеличилось, может просто нужно убрать ваше увеличение?
Или как вам посоветовали через @media изменять параметры для определенных PixelRatio?

[Sensei]

Дизайн нужно разрабатывать под CSS пиксели (device width), а не под физическое разрешение.

[alleclf]

  On 2/26/2015 at 6:59 AM, Sensei said:

Дизайн нужно разрабатывать под CSS пиксели (device width), а не под физическое разрешение.

а тестировать тогда как? В эмуляторе одно, реально другое.

[alleclf]

Где модно посмотреть у каких устройств какой PixelRatio.

Хочу понять зависимость PixelRatio от разрешения экрана или физических размеров.

Edited February 26, 2015 by alleclf

[Sensei]

http://www.mydevice.io/devices/