Версия сайта для iPhone, рекомендует работать в пикселях или в%?

Question

Я еще не сделал ни одну версию iPhone, поэтому у меня есть этот вопрос,

Для того, чтобы иметь возможность правильно просматривать веб-сайт, даже если пользователь поворачивает телефон на 90º:

Должен ли CSS быть установлен с помощью в пикселях или в%?

Answer 1

Если вы программно ориентируетесь на устройства iOS, такие как iPhone и iTouch, то я бы использовал пиксели, а не проценты, но если вы не ориентируетесь на такие устройства и хотите иметь универсальный мобильный сайт для всех (большинство смартфонов), то Я хотел бы рассмотреть использование процентов.

Вы можете указать min-width max-width and min-device-width and max-device-width в своих медиа-запросах.

Вот еще немного о медиазапросах и комбинациях, которые вы можете сделать;

/* Target iPhone Portrait */
@media screen and (max-width: 320px) and (orientation: portrait) { body{background:#F0F;} }

/* Target Android Portrait larger than 320px Width */
@media screen and (min-width: 321px) and (max-width: 480px) and (orientation: portrait) { body{background:#F00;} }

/* Target iPhone Landscape */
@media screen and (max-width: 480px) and (orientation: landscape) { body{background:#0F0;} }

/* Target Android Landscape */
@media screen and (min-width: 481px) and (max-width: 800px) and (orientation: landscape) { body{background:#FF0;} }

Answer 2

Вы можете использовать% с одним классом CSS, и размер компонентов будет изменен автоматически.

Вы также можете использовать px с двумя классами, один для портрета, другой для ландшафта:

body[orient="portrait"] {
property: value;
}
body[orient="landscape"] {
property: value;
}

Answer 3

Если вы создаете неконкретный веб-сайт для iPhone (субдомен, такой как iphone.mywebsite.com), я бы предложил использовать CSS Media Queries, как было предложено Xavier.Это позволяет вам делать гораздо больше, чем указывать min-width и max-width!

. Вы можете указать тип устройства (но многие устройства не распознаются так, как должны…), например: screen handheld print tv и многие другие. Но самое главное, что вы также можете установить, если окно браузера находится в portait или landscape, это resolution или aspect-ratio и так далее ...

Что касается% или px, я определенно выбрал бы px, очень сложно заставить что-то работать, как вы хотели бы использовать%.Потому что вы не обязательно хотите получать такую ​​же информацию, если ваш пользователь приходит с iPhone или с другим устройством.Например, вы можете извлечь все тяжелые изображения с вашего веб-сайта для пользователей iPhone, потому что они, вероятно, будут использовать соединение 3G и, таким образом, ускоряют загрузку вашего сайта!

Действительно хороший пример того, что вы можете сделать с помощью CSS Media Queries ... к сожалению, это не моя работа ...: - (

Answer 4

Лично я бы использовал%, а не px ...

Вы захотите, чтобы страница стала на 100%, когда бы она ни вращалась, и затем соответственно измените содержимое.

New York Times использует%, так как вы можете видеть, где на странице находится альбомная ориентация, масштаб которой увеличен, чем книжная.