Еще раз про pixel-ratio

[Zverushka]

Возникла такая проблема.

Я суждаю сайт до 760 пикселей и делаю нужный вид ему.

Открываю в эмуляторе айфоне в хроме (там опция такая) - вижу совершенно другую верстку - элементы куда-то уезжают, во бщем будто бы ширина экрана совершенно иная.

 

Это и есть эффект повышенной плотности пикселей или я чего-то не догоняю?

[wh1tegray]

а можно html + css? и каким эмулятором пользуетесь?

 

ЗЫ: для ретина экранов это (плотность) не редкость) вот тут есть решение по плотности пикселей http://tj-s.ru/tod/adaptirovanie-verstki-dlya-retinaekranov.html

Edited June 4, 2014 by wh1tegray

[Cherous]

В Хроме инструмент для адаптивной верстки сделан криво, а вот Firefox к моему удивлению прекрасно справляется с этой задачей и не добавляет стандартные скролы, которые ломают верстку и которых в реальных условия в принципе не должно быть. (Firefox -> Cntrl+Shift+M). 

Также для адаптивной верстки нужно юзать специальные мета теги.

 

<meta name="HandheldFriendly" content="true" />

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

 

P.S. Надеюсь поможет 

[SelenIT]

Мобильные браузеры по умолчанию раскидывают элементы относительно «виртуального вьюпорта» (в iOS он соответствует окну шириной 980px, в андроидном браузере — 800px, в мобильных Операх, кажется, 850, подробнее — у PPK в «сказе о двух вьюпортах»), который потом зумится до фактической ширины экрана. Это можно изменить с помощью <meta name="viewport">.

Pixel ratio, насколько я в курсе, на размер виртуального вьюпорта не влияет.

[Zverushka]

а можно html + css? и каким эмулятором пользуетесь?

 

А там можно настроить свое разрешение? У меня идет под айфоны от 760пикселей стили, а этот эмулятор дает от 768пикселей. Может я зря от 760 сделала? Надо повыше взять ширину?

@SelenIT, вьюпорт прописан <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">

[Bassline]

Вот так попробуй:

@media only screen and (max-width : 959px),only screen and  (max-device-width : 767px) {    .page {        width: 760px;    }}

[Zverushka]

@Bassline, а какая в этом коде логика? У меня просто до 910 есть другие стили - потому как неудачно разъезжалось на этом разрешении.

[SelenIT]

Вот здесь рекомендуют для подобной ситуации указывать в meta viewport конкретно ту ширину, под которую дизайн оптимизирован, в данном случае, видимо, 760px. А вообще с этой метой какая-то уличная магия

[Zverushka]

Вот собственно в чем суть. 

http://joxi.ru/sgqaU_3JTJBaf3ZkICM

Написано,ч то вьюпорт 640, но ширина боди 320 пикселей.

Какая же реальная ширина?

 

Так.. посмотрела в browserstack, действительно выглядит как и в хромоэмулятор - 320 пикселей. Ммммммммм. Получается они настолько мелкие? Как же так? 320 пикселей - это же глазок какой-то....

Edited June 12, 2014 by Zverushka

[SelenIT]

320, как я понимаю. Под «viewport» эмулятора, судя по всему, предполагается screen.width, а ему вообще никогда верить нельзя.

[Zverushka]

На какой из запросов среагирует айфон? на @media (max-width: 320px)  или на @media (max-width: 640px)  ?

[klierik]

"физическая" ширина экрана 320 точек.

[SelenIT]

Насколько я понимаю, медиазапрос к width выдает то, что зашито в meta viewport width. В случае device-width должно возвращать 320.