首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >仅针对iPad和iPad的CSS媒体查询?

仅针对iPad和iPad的CSS媒体查询?
EN

Stack Overflow用户
提问于 2011-11-25 23:55:24
回答 8查看 196.2K关注 0票数 78

嗨,我正在使用多个平板电脑设备,iPad,银河平板电脑,宏碁图标,LG 3DPad等。

  • iPad - 1024 x 768
  • LG Pad - 1280 x 768
  • 银河标签- 1280 x 800

我只想使用CSS3媒体查询来定位iPad。因为,LG和iPad的设备宽度是相同的768px -我有困难分离每个设备。

我试着用下面的方法分开,但似乎不起作用:

代码语言:javascript
复制
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : portrait) /* applied to lg also */
@media only screen and (min-resolution: 132dpi) and (max-device-width: 1024px) and (orientation : portrait) /* applies to lg also */
@media only screen and (device-aspect-ratio: 1024/768) and (orientation : portrait) /* does not work on iPad or LG */

我不知道iPad的-webkit-device-pixel-ratio和其他-webkit*选项以及它们的目标值。我不想使用JavaScript来设计风格,你有什么想法吗?

EN

回答 8

Stack Overflow用户

回答已采纳

发布于 2012-03-01 02:25:17

最终找到了一个解决方案:Detect different device platforms using CSS

代码语言:javascript
复制
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" />

为了减少HTTP调用,这也可以在你现有的通用CSS文件中使用:

代码语言:javascript
复制
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
  .ipad-portrait { color: red; } /* your css rules for ipad portrait */
}
@media all and (device-width: 1024px) and (device-height: 768px) and (orientation:landscape) {
  .ipad-landscape { color: blue; } /* your css rules for ipad landscape */
}

希望这能有所帮助。

其他参考文献:

票数 150
EN

Stack Overflow用户

发布于 2015-06-11 17:13:49

我回答这个问题有点晚了,但上面的这些都没有对我起作用。

这就是对我有效的方法

代码语言:javascript
复制
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    //your styles here
   }
票数 10
EN

Stack Overflow用户

发布于 2011-11-26 01:43:06

您需要通过设备的用户代理,使用一些脚本来确定设备的目标。iPad的用户代理是:

代码语言:javascript
复制
Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10
票数 6
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/8271493

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档