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

Question

[del993788]

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

Answer 1

[sergski]

Используйте фичи медиа для девайсов — 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) { }

Comments

[del993788]

У ipad mini разрешение пикселей по ширине меньше чем у iphone 6 plus, но на iphone 6 plus должен быть 1 блок, а на ipad mini должно быть 2 блока. Что делать?

[sergski]

Нет. Важно различать аппаратный рамер экрана и программный. У iphone6+ коэффициент масштабирования 3x, а у ipad 1x. Вобщем, вам нужен программный:
iphone5 — 320x568
iphone6 — 375x667
iphone6+ — 414x736,
ipad — 768x1024

[del993788]

а при изменении положения (portrait и landscape) разве ширина не меняется? Или ширина и высота - это устойчивые величины?

[sergski]

qqignatqq: orientation это указание, как вы держите девайс — горизонтально или вертикально, а размеры есть размеры) Можно управлять строгостью применения media, все что нужно тут — https://www.w3.org/TR/css3-mediaqueries/