Ответ 1

Я установил страницу, в которой показано, как какое-либо устройство будет реагировать на мультимедийные запросы, задавая значения медиа-функций. Просто зайдите на страницу с помощью устройства, которое вы хотите проверить:

http://pieroxy.net/blog/pages/css-media-queries/test-features.html

Оттуда вы можете решить, какой медиа-запрос вы хотите использовать, исходя из того, что сообщают разные устройства. Помните, что это, как правило, плохая идея для таргетинга на определенные устройства. Вы должны ориентироваться на размеры и плотность отображения, чтобы ваш сайт адаптировался к поверхности.

Ответ 2

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

Например, Galaxy S4 от Samsung имеет 1080X1920 пикселей - Full HD экран!

Но в отзывчивом дизайне мы проверяем разрешение и должны соответствовать по разрешению, и если вы попытаетесь добавить медиа-запрос, скажем, min-width 1000px и проверьте его на Samsung Galaxy S4, вы увидите, что ничего не произошло.

Причина этого в том, что мобильный экран высокой плотности имеет два аспекта пикселей.

Реальное разрешение Первая резолюция - это реальное разрешение factory, в основном для видео и изображений. на Samsung Galaxy S4 реальное разрешение - 1080X1920.

Разрешение CSS Вторая резолюция для браузера. и для нас разработчиков это означает, что нам нужно действовать по-разному и не соответствовать реальному разрешению экрана. в Samsung Galaxy S4, разрешение CSS 360X640.

Разрешение Samsung Galaxy S4: Реальное разрешение: 1080X1920 Разрешение CSS: 360X640

Как получить разрешение CSS? В Википедии есть таблица разрешений для мобильных устройств (планшетные и мобильные устройства). http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

/*(ldpi) Android*/
@media only screen and (-webkit-device-pixel-ratio:.75){

  /*CSS  */
}

/*(mdpi) Android*/
@media only screen and (min-device-width : 480px) and (max-device-width : 800px) {

  /*CSS  */
}

/*(hdpi) Android*/
@media only screen and (-webkit-device-pixel-ratio:1.5){

  /*CSS  */

}

Ответ 3

Я использовал это, чтобы нацелить только портретный вид на s3:

@media only screen and (min-device-width : 719px) and (max-device-width : 721px) and (-webkit-min-device-pixel-ratio : 2) and (orientation : portrait) { 

}

Ответ 4

Как упоминалось ранее. Используйте этот детектор медиа-запросов на вашем мобильном телефоне, а также подумайте над тем, чтобы использовать лучший дизайн жидкости - CSS-хаки не очень хороши - вы не должны действительно нуждаться в них в 90% сценариев, если у вас хороший дизайн жидкости.

Samsung Galaxy S3

@media only screen and (max-device-width: 720px) and (orientation:portrait) {
  .your-css{}
}

@media only screen and (max-device-width: 1280px) and (orientation:landscape) {
  .your-css{}
}

Ответ 5

Samsung Galaxy S я и II: 320 x 533, в портретном режиме (плотность пикселя CSS 1,5)

Samsung Galaxy S III: 360 x 640, в портретном режиме

Ответ 6

На моем Samsung S3 с Android 4.1.2, когда я пробовал все функции медиа-запросов (максимальная высота, ширина, высота и ширина устройства и даже цвет: 8), только это работало для меня в дополнение к второй ответ выше на этой странице:

браузер Samsung S3 по умолчанию

/* Samsung S3 default browser portrait*/
@media only screen and (device-width: 720px) and (device-height: 1280px) and (orientation: portrait) {
body { background:yellow;} 
}

/* Samsung S3 default browser landscape */
@media only screen and (device-width: 1280px) and (device-height: 720px) and (orientation: landscape)  {
body { background:#000;} 
}

Вот скриншот для pieroxy тест диагностического инструмента для средств массовой информации. Обратите внимание на, которые работают без ориентации, но не изменяют приложенность без загрузки/обновления.

Надеюсь, что это поможет без конфликтов с любыми другими запросами, которые вы можете использовать

Ответ 7

Я думаю, что это безопасно применимо к большинству телефонов сегодня (HTCs, iPhone, Samsung), избегая общей ширины планшета (iPad iPad 3/4 iOS 6 имеет 672px на портрете).

<link rel='stylesheet' href='/Styles/device_phone.css' media='screen and (max-width: 640px)'/>

Этот телефон будет нечетной рыбой:

Samsung Nexus S Android 2.3.6 Stock Browser, который имеет ширина: 480 пикселей, высота: 800 пикселей (максимальная ширина 800)

Как правило, не рекомендуется настраивать таргетинг на определенные устройства, но если вы действительно хотите настроить таргетинг на нечетную рыбу, вы можете, так как она имеет другие уникальные атрибуты. Я лично предпочитаю использовать max-width, поскольку я могу тестировать прямо на своем рабочем столе и на большом экране, и я не суетился для пользователей, видящих мобильный вид, если они действительно изменили размер своего браузера до ширины менее 640.

Ссылка: http://pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html

Ответ 8

Это проверено и работает.

@media only screen and
(device-width: 720px) and
(device-height: 1280px)  and
(-webkit-min-device-pixel-ratio: 2)

Ответ 9

Забудьте все это "max-device-width" "min-height" и т.д., quackery! Проблема в том, что вы, ребята, не проектируете размеры устройства. Кроме того, Galaxy S3 в соответствии с Samsung имеет плотность пикселей 2, что означает, что на физическом экране отображается 1 пиксель устройства на 2 пикселя CSS. Если это так, то разрешение 720x1280 - это только логическое разрешение, а не реальное физическое разрешение устройства! Это также относится к Apple iphone 4, который имеет указанное разрешение 640x960 пикселей, что на самом деле является логическим разрешением и НЕ реальным разрешением фактического устройства. Реальное физическое разрешение для iphone составляет половину этого числа после учета плотности пикселей, то есть его физические размеры фактически равны 320x480, что верно, так как я все время использую этот код!

Поэтому, если S3 также имеет плотность пикселей 2, то его реальное собственное разрешение на самом деле составляет 360x640 пикселей, а не 720x960, как указано Samsung. Опять же, устройство отображает 2 пикселя CSS на 1 пиксель устройства! Кроме того, почему люди используют переменные медиа-запросы, quackery, я вам говорю!

@media screen and (device-width: 360px) and (device-height: 640px) and (orientation: portrait) {

Стили идут сюда }

@media screen and (device-width: 640px) and (device-height: 360px) and (orientation: landscape) {

Стили здесь } ИЛИ: Вы можете просто указать логическое разрешение, которое было предоставлено Samsung, DuH!, Rocket science правильно?

@media screen and (width: 720px) and (height: 1280px) and (orientation: portrait) {

Стили }

@media screen and (width: 1280px) and (height: 720px) and (orientation: landscape) {

Стили } Очень просто! Вот и все. И люди задаются вопросом, почему они не могут заставить медиа-запросы работать, но они используют все эти значения переменных. Попробуйте на самом деле настроить разрешение для устройства. Нет никаких оснований на земле никогда не использовать переменные значения, такие как "max-width" и т.д.