作者热门文章
- iOS/Objective-C 元类和类别
- objective-c - -1001 错误,当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
@media 查询在 iPhone 5 和 iPad 4 操作系统 中不起作用。我使用以下 CSS 为不同屏幕的每个操作系统和设备设置样式。
我明确检查了我的 iPad 和 iPhone 的宽度和高度,并且仅基于此我保留了媒体查询。这在 ANDROID 操作系统上很好。
/*@media print {*/
/* iPhone 5 (Portrait) */
@media screen and (max-device-height: 568px) and (orientation: portrait) {
#map_canvas {
border: 1px dashed #C0C0C0;
width: 290px;
height: 473px;
}
}
/* iPad 4 (Portrait) */
@media screen and (max-device-height: 1024px) and (orientation: portrait) {
#map_canvas {
border: 1px dashed #C0C0C0;
width: 735px;
height: 929px;
}
}
/* iPad 4 (Landscape) */
@media screen and (max-device-width: 1024px) and (orientation: landscape) {
#map_canvas {
border: 1px dashed #C0C0C0;
width: 990px;
height: 673px;
}
}
/* Samsung 10.1 inch (Portrait) */
@media screen and (max-device-height: 1280px) and (orientation: portrait) {
#map_canvas {
border: 1px dashed #C0C0C0;
width: 790px;
height: 1140px;
}
}
/* Samsung 10.1 inch (Landscape) */
@media screen and (max-device-width: 1280px) and (orientation: landscape) {
#map_canvas {
border: 1px dashed #C0C0C0;
width: 1230px;
height: 680px;
}
}
/* Samsung 7.0 inch (Portrait) */
@media screen and (max-device-height: 1024px) and (orientation: portrait) {
#map_canvas {
border: 1px dashed #C0C0C0;
width: 570px;
height: 875px;
}
}
/* Samsung 7.0 inch (Landscape) */
@media screen and (max-device-width: 1024px) and (orientation: landscape) {
#map_canvas {
border: 1px dashed #C0C0C0;
width: 990px;
height: 455px;
}
}
@media all and (orientation: landscape) {
html, body {
height: auto;
}
}
每次我对上述代码进行各种更改进行测试时,我都会得到最后一个 CSS 被引用以应用该样式。
我找到了一个链接(我还没有尝试过,但会在 mac 可用后尽快尝试),但对此也有疑问 ( iphone/ipad media query issues )。任何人都可以解释在这种情况下像素比很重要吗?
最佳答案
摘自https://mislav.net/2010/04/targeted-css/
You should be aware that orientation media query, although supported on the iPad, doesn’t work on the iPhone (tested with v3.1.3). Fortunately, size queries like width and device-width work, so layout-switching is possible without JavaScript with some combination of those.
关于ios - 媒体查询不适用于 iPhone 和 iPad,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14818277/
我是一名优秀的程序员,十分优秀!