Как справиться с разным разрешением (Retina и HD) на мобильном устройстве?

У меня есть разные файлы CSS для разных макетов (телефон и планшет). Поскольку я добавил стили в вид планшета на основе вида, который я получаю на моем Samsung Note 8 с разрешением 1200x800.

Но когда я запускаю это приложение на Samsung Galaxy tab750 с разрешением 1920x1080, я получаю меньший макет с меньшими шрифтами, так как я настроил шрифты и макет на основе Note 8.

Поэтому я получаю предложение добавить еще один файл CSS для обработки этого. Затем, когда наш QA попытался запустить приложение на iPad (Retina Display 2048x1536), снова третий CSS даже мал в нем.

В 2012 году был выпущен единственный планшет с разрешением 2560x1600. В 2013 году их было как минимум шесть. Я подозреваю, что в 2014 году мы увидим еще больше #ixzz2nhc1BlAw" rel="nofollow noreferrer">http://ces.cnet.com/8301-35302_1-57615742/tablets-at-ces-2014-the-calm-before-the-storm/#ixzz2nhc1BlAw ).

Относительно этого поста Отзывчивый веб-дизайн и дисплеи с высоким разрешением (iPhone 4/5),

Мы будем использовать медиа-запросы для требуемых разрешений,

/* Large desktop */
@media (min-width: 1200px) {
    font-size: 18px;
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
    font-size: 16px;
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
    font-size: 14px;
}

/* Landscape phones and down */
@media (max-width: 480px) {
    font-size: 12px;
}

Поэтому меня беспокоит, можем ли мы справиться с этим сценарием, не добавляя все больше и больше CSS и медиа-запросов, если да, пожалуйста, предложите.


html css responsive-design high-resolution screen-resolution
person Ashis Kumar    schedule 19.12.2013    source источник
comment
Это зависит от дизайна, которого вы пытаетесь достичь. В Интернете, как правило, плохая идея создавать макеты, предполагающие определенное разрешение — как вы заметили, доступ к Интернету может и будет осуществляться на устройствах с любым разрешением. Невозможно (и, возможно, не по теме Stack Overflow) рассказать вам в целом, как создавать макеты, работающие на разных разрешениях, но если у вас есть конкретный вопрос о макете, над которым вы работаете, покажите нам.   -  person Paul D. Waite    schedule 19.12.2013

Ответы (1)


arrow_upward
2
arrow_downward

Существуют ряд способов обнаружения устройств высокой плотности/ретина на основе медиа-запросов.

Я лично склонен использовать это, которое, кажется, захватывает подавляющее большинство устройств:

@media screen and (-webkit-min-device-pixel-ratio: 2),
    screen and (max--moz-device-pixel-ratio: 2),
    screen and (min-device-pixel-ratio: 2) {}

Хотя сугубо личные предпочтения!

Имейте в виду, что по большей части экраны с «высокой плотностью» (а не просто с высоким разрешением) сообщают о себе как о своем разрешении, отличном от HD, для целей медиа-запросов.

Например: Retina Apple iPads имеют фактическое разрешение экрана 2048 на 1536, но по-прежнему сообщается как 1024 на 768 пикселей. Таким образом, одни и те же медиа-запросы ширины/высоты экрана будут захватывать iPad 4 (ретина) так же, как и iPad 2, и, за исключением того, что в случае более старого iPad они будут немного более размытыми, они будут выглядеть так же.

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

Одним из очень важных исключений являются устройства отображения с высокой плотностью изображения, работающие под управлением Windows 8 Mobile, которые имеют известная ошибка с правильным сообщением об области просмотра.

person johnkavanagh    schedule 19.12.2013
comment
Спасибо за Ваш ответ. Я уже использую медиа-запросы. Но меня беспокоит то, что я уже доставил обработку приложений до устройства (1920x1080). Затем, если пользователь склонен запускать приложение на устройстве (2048x1536), то он обязательно получит меньший макет. И если нам нужно обработать это разрешение, то опять же нужно собрать другую версию приложения. Так что мой вопрос основан на этом. Можем ли мы что-то сделать, чтобы, если нам нужно запустить мое приложение на 2048x1536, оно должно масштабировать макет, чтобы я получил тот же вид, что и на устройстве 1920x1080. - person Ashis Kumar; 19.12.2013