@del993788

Отдельная мобильная версия для планшета и отдельная для телефона?

Здравствуйте. Верстаю блог. При размерах от 1400 он состоит из 3 блоков ( 2 сайдбара и контент по центру). При размерах от 1000 до 1400 - 2 блока (контент и сайдбар). При размерах от 480 до 999 - 1 блок (контент с сайдбаром вместе). Выходит 3 версии сайта: крупная, средняя и малая. Крупная и средняя будут принадлежать декстопу, а малая мобильникам. Но у меня появляется проблема. Средняя версия сайта: Она подходит как на ПК, так и на планшет, но ведь планшет тоже является мобильным устройством, а "умные" ребята из Купертино сделали телефон с fullHD(1920x1080), что является больше, чем на большинстве планшетов (таблеток)!!! И мне теперь страдать. Ладно, если бы у нас были бы только телефоны и ПК, то яб сделал среднюю и крупную версию для пк, а для телефона бы сделал малую, тогда на iphone 6 plus и на iphone 4 картинка бы выглядела одинаково. Но малая версия на том же galaxy tab 10 выглядит стрёмно, а средняя там смотрится нормально. Подскажите, как выходить из положения?
  • Вопрос задан
  • 585 просмотров
Решения вопроса 1
sergski
@sergski
web-developer
Используйте фичи медиа для девайсов — device-width, device-height, orientation, device-aspect-ratio

iPhone 6+
media only screen
and (device-width : 414px)
and (device-height : 736px)
and (orientation : landscape)
and (device-aspect-ratio: 736/414) { }

media only screen
and (device-width : 414px)
and (device-height : 736px)
and (orientation : portrait)
and (device-aspect-ratio: 736/414) { }

ipad
media only screen
and (device-width : 768px)
and (device-height : 1024px)
and (orientation : landscape) { }

media only screen
and (device-width : 768px)
and (device-height : 1024px)
and (orientation : portrait) { }
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы