@vlad1337
WEB-программист

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

Нужно сделать так, чтобы при заходе на сайт через планшет в горизонтальном положении было изменено одно CSS свойство. Пытался сделать с помощью:
@media handheld and (orientation: landscape){
 
 .choose article div {
	opacity:0.6;
}
}

Не помогло.
Делал через
@media only screen and (orientation:landscape) {
 
 .choose article div {
	opacity:0.6;
}
}

Тоже самое.
Проблема заключается в том, что при вышеуказанных свойствах изменение затрагивает и десктоповскую версию сайта.
У кого какие идеи?
  • Вопрос задан
  • 11458 просмотров
Решения вопроса 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 */
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
gr1mm3r
@gr1mm3r
50% ответа в правильном вопросе. Остальное мануал.
@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){}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы