什么是IPad Pro正确的媒体查询? [英] What is correct media query for IPad Pro?
本文介绍了什么是IPad Pro正确的媒体查询?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有这两个,但它们不起作用.我正在Chrome中模拟
I have these two but they are not working. I'm simulating in Chrome
/* Landscape*/
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}
/* Portrait*/
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}
如果我删除和(方向:风景)",则其中的css将在第一个媒体查询中起作用. 对于风景和肖像,正确的方向是什么?
If I remove 'and (orientation: landscape)' then the css in there works in the first media query. What is the correct orientation, for both landscape and portrait ?
HTML元数据设置为
The HTML meta is set as
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
推荐答案
/* ----------- iPad Pro ----------- */
/* Portrait and Landscape */
@media only screen
and (min-width: 1024px)
and (max-height: 1366px)
and (-webkit-min-device-pixel-ratio: 1.5) {
}
/* Portrait */
@media only screen
and (min-width: 1024px)
and (max-height: 1366px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1.5) {
}
/* Landscape */
@media only screen
and (min-width: 1024px)
and (max-height: 1366px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1.5) {
}
我没有iPad Pro,但这在Chrome模拟器中对我有效.
I don't have an iPad Pro but this works for me in the Chrome simulator.
这篇关于什么是IPad Pro正确的媒体查询?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文