Как на телефонах с высоким разрешением экрана сделать адаптив?

Question

[SueAnn]

Есть адаптивный сайт makeuphouse.ru
Есть 6 айфон с разрешением около 1000 пикселей и соответственно он выглядит так, как должен на 1000 пикселях, то есть все маленькое.
Но почему-то не все адаптивные сайты себя так-же ведут, например lp.tandem.by на айфоне отображается с минимальной шириной, т.е. 470 пикселей. Как мне сделать так-же?

Answer 1

[Алексей]

Магия

meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Ну и отдельные стили @media only screen and (max-width:1000px)

Answer 2

[Cyber_bober]

Как написал выше Алексей, подключить мета-тег, а вот разрешение айфона нужно поделить на два, так как это ретина экран и физическое разрешение у вас будет меньше. Ширина, если не ошибаюсь, 375 пикселей. Бутстрэп к примеру предлагает медиа для смартфонов в max-width:767px

Comments

[SueAnn]

А как поделить на 2?

Answer 3

[Роман Дворянов]

Для ретины нужно писать следующий медиазапрос -

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
 /* Ваш css код */
}

Comments

[SueAnn]

и мне придеться переписать стили для вообще всего огромного лендинга? Без этого никак?

[Алексей]

SueAnn: да, придеться для всего что поедет на телефоне.

[SueAnn]

Но у меня ничего не едет, у меня все одинаково маленькое

[Роман Дворянов]

SueAnn:
Немного предистории:
Разрешение 6-го айфона 750х1334, с учетом pixel-ratio=2 все пискелы сжимаются в два раза, делая изображение четче, в итоге мы имеем разрешение 357х667(сюдя по dev tools в гуглхроме), просто картинки, которые вытянулись в два раза смотрится на ретине размытыми.
В общем дело не в разрешении айфона и медиазапросах.

В браузерной эмуляции мобильной версии сайт makeuphouse.ru выглядит как вполне себе адаптивный, естественно не у каждого есть айфон под рукой, да и те у кого есть, не горят желанием, лишний раз заходить на нем куда-нибудь.
Я посмотрел на iphone 5s, да, этот сайт ведет себя неадекватно, показывает сайт как на дестктопе в полную ширину, возможно это из-за подключенного онлайн-чата, возможно какой-то другой скрипт все портит, так сразу не сказать, особенно когда дело касается мобильного устройства, а не его эмуляции, тут только метод тыка поможет, попробуйте поочередно скрипты сторонние поотключать

[SueAnn]

Он показывает не как на десктопе, а как на устройстве шириной 950 - 1000 пикселей, на десктопе выглядит по-другому, я же и планшетную версию тоже делала, и версию для нетбуков, у которых 1024.
В общем, я сделала такой медиа-запрос
media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
/* Ваш css код */
}
и внутрь скопировала весь css, но все размеры в пикселях умножила на 2 (час сидела) и теперь все норм отображается.