Какой нужен для планшетов media запрос?

Question

[Влад Базаров]

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

@media handheld and (orientation: landscape){
 
 .choose article div {
	opacity:0.6;
}
}

Не помогло.
Делал через

@media only screen and (orientation:landscape) {
 
 .choose article div {
	opacity:0.6;
}
}

Тоже самое.
Проблема заключается в том, что при вышеуказанных свойствах изменение затрагивает и десктоповскую версию сайта.
У кого какие идеи?

Answer 1

[Михаил Горячкин]

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px) {
  /* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width: 321px) {
  /* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width: 320px) {
  /* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px) {
  /* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape) {
  /* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait) {
  /* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width: 1224px) {
  /* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width: 1824px) {
  /* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  /* Styles */
}

Comments

[Влад Базаров]

Но это только для Ipad. А что делать с другими планшетами?

[Михаил Горячкин]

Это не только iPad, я просто так подписал, это справедливо для любого девайса с данной ориентацией экрана и при разрешении от 768 до 1024.

[Влад Базаров]

Михаил Горячкин: Спасибо, пашет.

[Сергей delphinpro]

Михаил Горячкин: По вашему все планшеты имеют разрешение 768*1024? Или автору вопроса нужно только под свой планшет написать стили ? :)

[Илья Шатохин]

Сергей: При наличии правильного meta тега viewport это не играет роли. Пример:

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

[Влад Базаров]

Сергей: как я понял, это решение универсально. Если у вас есть другие варианты, то с радостью выслушаю:)
И да, сайт пока тестирую на своём планшете))

[Михаил Горячкин]

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

[Сергей delphinpro]

Михаил Горячкин: нет, я говорю о том, что вы жестко привязываетесь к разрешению экрана min&max исключая таким образом любые другие варианты.

[Михаил Горячкин]

Согласен, можно только max использовать, так попроще будет.

[Тимур Орлов]

Самый "костыльный", но точный способ, это определять устройство с помощью javascript, создать несколько файлов для разных типов/диапазон (разные устройства, один движок), и подгружать их в соответствии с определением устройства.
Хотя...актуально ли сейчас это, не знаю.

Answer 2

[Антон Нагаец]

@media screen and (max-width:1024px){}
@media screen and (max-height:530px){}
@media screen and (max-height:780px){}
@media screen and (max-width:1024px),all and (max-height:530px){}
@media all and (max-width:1024px),all and (max-height:530px){}
@media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (-o-min-device-pixel-ratio:3 / 2),only screen and (min--moz-device-pixel-ratio:1.5),only screen and (min-device-pixel-ratio:1.5){}
@media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (-o-min-device-pixel-ratio:3 / 2),only screen and (min--moz-device-pixel-ratio:1.5),only screen and (min-device-pixel-ratio:1.5){}
@media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (-o-min-device-pixel-ratio:3 / 2),only screen and (min--moz-device-pixel-ratio:1.5),only screen and (min-device-pixel-ratio:1.5){}
@media screen and (min-width:1024px){}

Comments

[Влад Базаров]

Это, как я понял, на все случаи жизни)

[Антон Нагаец]

vlad1337: Почти. тут не все есть. НО прописывать медиа так становиться проще.

[Влад Базаров]

Антон Нагаец: Спасибо)

Answer 3

[Dmitry Abu]

1
Синтаксис @media
media тип_устройства оператор (опции) {
...
}

Где тип_устройства может принимать следующие значения:

all Все устройства
print Принтеры
screen Экраны компьютеров, планшеты, смартфоны
speech Речевые браузеры
Операторы:

and Логическое И
or или , Логическое ИЛИ
not Логическое отрицание
only Скрывает правило media от старых браузеров
Опции:

aspect-ratio, min-aspect-ratio, max-aspect-ratio Отношение ширины и высоты области просмотра
color, min-color, max-color Количество бит на цвет для устройства
color-index, min-color-index, max-color-index Количество цветов, которое устройство может отобразить
device-aspect-ratio, min-device-aspect-ratio, max-device-aspect-ratio Соотношение сторон экрана
device-height, min-device-height, max-device-height Вся доступная высота экрана
device-width, min-device-width, max-device-width Вся доступная ширина экрана
height, min-height, max-height Высота области просмотра
width, min-width, max-width Ширина области просмотра
orientation Положение экрана (landscape или portrait)
resolution, min-resolution, max-resolution Разрешение экрана
2
Мобильные телефоны
iPhone 5, 5S, 5C, 5 SE
/* iPhone 5, 5S, 5C, 5 SE (портретный режим) */
media only screen and (orientation: portrait) and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
...
}

/* iPhone 5, 5S, 5C, 5 SE (альбомный режим) */
media only screen and (orientation: landscape) and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
...
}
CSS
iPhone 6, 6S, 7, 8, SE 2020
/* iPhone 6, 6S, 7, 8, SE 2020 (портретный режим) */
media only screen and (orientation: portrait) and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
...
}

/* iPhone 6, 6S, 7, 8, SE 2020 (альбомный режим) */
media only screen and (orientation: landscape) and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
...
}
CSS
iPhone 6+, 7+, 8+
/* iPhone 6+, 7+, 8+ (портретный режим) */
media only screen and (orientation: portrait) and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
...
}

/* iPhone 6+, 7+, 8+ (альбомный режим) */
media only screen and (orientation: landscape) and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
...
}
CSS
iPhone X, XS, 11 Pro, 13 mini
/* iPhone X, XS, 11 Pro, 13 mini (портретный режим) */
media only screen and (orientation: portrait) and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) {
...
}

/* iPhone X, XS, 11 Pro, 13 mini (альбомный режим) */
media only screen and (orientation: landscape) and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) {
...
}
CSS
iPhone XS Max, XR, 11, 11 Pro Max
/* iPhone XS Max, XR, 11, 11 Pro Max (портретный режим) */
media only screen and (orientation: portrait) and (min-device-width: 414px) and (max-device-height: 896px) and (-webkit-device-pixel-ratio: 3){
...
}

/* iPhone XS Max, XR, 11, 11 Pro Max (альбомный режим) */
media only screen and (orientation: landscape) and (min-device-width: 414px) and (max-device-height: 896px) and (-webkit-device-pixel-ratio: 3){
...
}
CSS
iPhone 12, 12 Pro, 13, 13 Pro
/* iPhone 12, 12 Pro, 13, 13 Pro (портретный режим) */
media only screen and (orientation: portrait) and (min-device-width: 390px) and (max-device-height: 844px) and (-webkit-device-pixel-ratio: 3){
...
}

/* iPhone 12, 12 Pro, 13, 13 Pro (альбомный режим) */
media only screen and (orientation: landscape) and (min-device-width: 390px) and (max-device-height: 844px) and (-webkit-device-pixel-ratio: 3){
...
}
CSS
iPhone 12 Pro Max, 13 Pro Max
/* iPhone 12 Pro Max, 13 Pro Max (портретный режим) */
media only screen and (orientation: portrait) and (min-device-width: 428px) and (max-device-height: 926px) and (-webkit-device-pixel-ratio: 3){
...
}

/* iPhone 12 Pro Max, 13 Pro Max (альбомный режим) */
media only screen and (orientation: landscape) and (min-device-width: 428px) and (max-device-height: 926px) and (-webkit-device-pixel-ratio: 3){
...
}
CSS
Samsung Galaxy S3
/* Samsung Galaxy S3 (портретный режим) */
media only screen and (orientation: portrait) and (min-device-width: 320px) and (max-device-height: 640px) and (-webkit-device-pixel-ratio: 2){
...
}

/* Samsung Galaxy S3 (альбомный режим) */
media only screen and (orientation: landscape) and (min-device-width: 320px) and (max-device-height: 640px) and (-webkit-device-pixel-ratio: 2){
...
}
CSS
Samsung Galaxy S4
/* Samsung Galaxy S4 (портретный режим) */
media only screen and (orientation: portrait) and (min-device-width: 320px) and (max-device-height: 640px) and (-webkit-device-pixel-ratio: 3){
...
}

/* Samsung Galaxy S4 (альбомный режим) */
media only screen and (orientation: landscape) and (min-device-width: 320px) and (max-device-height: 640px) and (-webkit-device-pixel-ratio: 3){
...
}
CSS
Samsung Galaxy S5
/* Samsung Galaxy S5 (портретный режим) */
media only screen and (orientation: portrait) and (min-device-width: 360px) and (max-device-height: 640px) and (-webkit-device-pixel-ratio: 3){
...
}

/* Samsung Galaxy S5 (альбомный режим) */
media only screen and (orientation: landscape) and (min-device-width: 360px) and (max-device-height: 640px) and (-webkit-device-pixel-ratio: 3){
...
}
CSS
3
Планшеты
4
iPad
/* iPad (все) */
media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
...
}

/* iPad (портретный режим) */
media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
...
}

/* iPad (альбомный режим) */
media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
...
}
CSS
5
Десктопы
Только настольные компьютеры
/* Только десктопы */
media (min-width: 1025px) {
...
}
CSS
Только большие экраны
/* Только большие экраны */
media only screen and (min-width : 1824px) {
...
}