css - 媒体查询在 iPad Pro 上无法正常工作

Question

我为 3 种类型的设备设置了访问者门户:移动设备(宽度小于 800 像素)、低分辨率桌面和高分辨率桌面，如下所示:

<link media="only screen and (min-width: 801px) and (max-height: 899px)" href="..." rel="stylesheet" type="text/css">   
<link media="only screen and (min-width: 801px) and (min-height: 900px)" href="..." type="text/css">   
<link media="only screen and (max-width: 800px)" href="..." rel="stylesheet" type="text/css">

所有这些都运行良好，但对于 iPad Pro 竖屏，屏幕宽度小于 800 像素，但选择的样式表是低分辨率桌面。我需要更改什么才能使其正常工作？

编辑(澄清问题)

当我做这样的事情时

<link media="only screen and (min-width: 801px) and (max-height: 899px)" href="..." rel="stylesheet" type="text/css">
<link media="only screen and (min-width: 801px) and (min-height: 900px)" href="..." rel="stylesheet" type="text/css">
<link media ="only screen and (max-width: 800px),
only screen and (max-device-width:1024px) and (-webkit-min-device-pixel-ratio:1.1) and (orientation:portrait),
only screen and (max-device-height:1366px) and (-webkit-min-device-pixel-ratio:1.1) and (orientation:landscape)"
href="..." rel ="stylesheet" type="text/css">

问题是样式在不同的分辨率下会混淆。我希望让它工作，以便在任何时候只有一个样式表处于事件状态。

Answer 1

iPad 媒体查询

iPad 媒体查询(所有世代 - 包括 iPad mini)

纵向和横向的 iPad

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { /* STYLES GO HERE */}

iPad 横屏

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

纵向 iPad

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

要了解有关设备媒体查询的更多信息，请访问 Stephen.io/mediaqueries 来源学分http://stephen.io/mediaqueries/

希望对您有所帮助。

谢谢