Css 媒体查询在iPad Pro上未按预期工作
我已经为3种类型的设备设置了访问者门户：移动设备（小于800px的宽度）、低分辨率桌面和高分辨率桌面，如下所示：Css 媒体查询在iPad Pro上未按预期工作,css,ipad,media-queries,Css,Ipad,Media Queries,我已经为3种类型的设备设置了访问者门户：移动设备（小于800px的宽度）、低分辨率桌面和高分辨率桌面，如下所示： <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
<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">
<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">
问题是，不同的分辨率会使风格混淆。我希望它能正常工作，这样在任何时候都只有一个样式表是活动的。iPad pro有一个视网膜显示器，像素纵横比可能为2，这使得几乎2 x 800=1600像素。这就是为什么选择的媒体查询是错误的。你还必须处理像素纵横比。请参阅：此查询适用于所有设备，我希望您的问题得到解决
@media only screen and (max-width:767px){
.big-dot{
width:280px; height:280px; margin:0 auto; background:red;
}
}/*===========Mobile Device=============*/
@media only screen and (min-width:768px) and (max-width:1280px){
.big-dot{
width:280px; height:280px; margin:0 auto; background:green;
}
}/*===========Tab and IPad Pro Device=============*/
@media only screen and (min-width:1280px) {
.big-dot{
width:280px; height:280px; margin:0 auto; background:cyan;
}
}/*===========Large Desktop Device=============*/
页面标题
时间大点/。。。。。
<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媒体查询（所有代-包括iPad mini） 纵向和横向的iPad
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) { /* STYLES GO HERE */}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) { /* STYLES GO HERE */}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) { /* STYLES GO HERE */}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) { /* STYLES GO HERE */}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { /* STYLES GO HERE */ }
谢谢据我所知，iPad Pro的分辨率为（1024x1366）像素，iPad Pro9.7的分辨率为（768x1024）像素。因此，如果您想加载特定分辨率的特定样式表，那么您可能需要加载
<link media="only screen and (min-width: 768px) and (max-width: 1199px)" href="..." rel="stylesheet" type="text/css">
/*---------------------------------------------------------------------
Large Desktops
-----------------------------------------------------------------------*/
@media only screen and (min-width: 992px) and (max-width: 1200px) {
}
/*---------------------------------------------------------------------
Desktops
----------------------------------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 991px) {
}
/*---------------------------------------------------------------------
Tablets Devices
-----------------------------------------------------------------------*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
}
/*----------------------------------------------------------------------
Mobile Devices
------------------------------------------------------------------------*/
@media only screen and (min-width: 360px) and (max-width: 479px) {
}
/*----------------------------------------------------------------------
Small Screen Mobile Devices
-----------------------------------------------------------------------*/
@media only screen and (min-width: 320px) and (max-width: 359px) {
}
/*---------------------------------------------------------------------
Large Desktops
-----------------------------------------------------------------------*/
@media only screen and (min-width: 992px) and (max-width: 1200px) {
}
/*---------------------------------------------------------------------
Desktops
----------------------------------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 991px) {
}
/*---------------------------------------------------------------------
Tablets Devices
-----------------------------------------------------------------------*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
}
/*----------------------------------------------------------------------
Mobile Devices
------------------------------------------------------------------------*/
@media only screen and (min-width: 360px) and (max-width: 479px) {
}
/*----------------------------------------------------------------------
Small Screen Mobile Devices
-----------------------------------------------------------------------*/
@media only screen and (min-width: 320px) and (max-width: 359px) {
}
在Chrome emulator中尝试过这个，但不起作用，只使用hi-res文件。你也可以使用xcode模拟器：developer.apple.com/library/content/documentation/IDEs/…。你还得看看你用的是哪款ipad（在最大宽度上指出正确的值）。正如我所说的，你会喜欢看的文章。特定于纵向，例如：为最小宽度和最大宽度声明相同的值以避免与桌面发生冲突。您指定了视口大小吗？@munimuna：您可以使用查看ipad显示的宽度。您正在使用viewport
meta物理大小CSS大小