Медиа-запросы CSS

Я пытаюсь адаптировать свое веб-приложение для планшета для использования на мобильных телефонах. Функциональность Media Query кажется идеальной, и мое первоначальное тестирование подтверждает это. У меня есть вопрос: с телефонами и планшетами, которые меняют свою ориентацию с книжной на альбомную (при повороте устройства), к чему тогда относится максимальная ширина?

Другими словами, более крупные телефоны Android имеют разрешение примерно 480x800, iPhone4 имеет разрешение 640x960, а оригинальный Blackberry Torch имеет разрешение 360x480. Это все разрешения (Ш x В), когда устройства находятся в портретном режиме, поэтому ширина составляет 400, 640 и 360 соответственно. Однако, когда вы поворачиваете устройство в альбомную ориентацию, высота «становится» шириной для целей отображения. Таким образом, эффективная ширина в альбомной ориентации становится соответственно 800, 960 и 480, а ширина 800 и 960 перекрывается с шириной планшета в альбомной ориентации, что портит отображение.

Итак, ширина всегда ширина? То есть, когда устройство сообщает о своих размерах, значение ширины всегда остается неизменным для целей CSS или значение ширины изменяется, когда устройство поворачивается в альбомную ориентацию?

Спасибо вам всем заранее.


person robert smith    schedule 21.01.2012    source источник
comment
Наверняка это просто изменит то, как люди могут менять разрешение экрана на ПК?   -  person Nathan MacInnes    schedule 22.01.2012


Ответы (3)


Значение ширины будет меняться при переворачивании устройства, потому что изменяется и ширина просматриваемой страницы.

Если вы хотите узнать, используется ли устройство в ландшафтном или портретном режиме, вместо этого вы можете использовать свойство ориентации:

@media screen and (orientation: portrait) {
}

Это проверит, больше ли ширина окна браузера, чем высота (ориентация: ландшафт сделает обратное). Для достижения наилучших результатов вам, вероятно, потребуется использовать комбинацию многих свойств MQ, используя оператор «и» для цепочки тестов. то есть:

@media screen and (orientation: landscape) and (max-width: 960px) {
}

полный список свойств MQ доступен здесь.

person 1nfiniti    schedule 23.01.2012
comment
еще один момент, который может помочь - ширина на самом деле является шириной окна браузера. device-width — это ширина экрана устройства. И ширина, и ширина устройства будут меняться при переворачивании устройства, но ширина устройства вычисляет ширину экрана, тогда как ширина вычисляет область окна просмотра браузера (экран минус полосы прокрутки или строки меню браузера). - person 1nfiniti; 23.01.2012
comment
Спасибо за ответы, они помогли. - person robert smith; 24.01.2012

Значение css изменяется в зависимости от его ландшафта или нет на мобильном телефоне, поскольку ширина и высота дисплея меняются на мобильном телефоне при повороте телефона или планшета. поэтому вы должны быть конкретными при определении стиля css для достижения того, что вы хотите.

@media (минимальная ширина: 700 пикселей) и (ориентация: альбомная) {

}

для подробного понимания медиа-запросов посетите: http://letsdopractice.com/css-media-queries/

person Jay Patel    schedule 21.05.2015

Медиа-запросы используются для определения стиля для разных размеров экрана. Я собираюсь рассказать вам об основных принципах медиа-запросов. Синтаксис медиазапроса CSS:

@media not|only mediatype and (media feature) {
CSS-Code;
}

Подробную информацию о синтаксисе мультимедийных запросов можно найти на этом сайте.

person Sajid    schedule 29.12.2015
comment
Это не ответ на вопрос. - person jcaron; 30.12.2015
comment
Я дал общий ответ. это может быть полезно для других. - person Sajid; 30.12.2015