是否有@media查询仅针对iOS运行设备？
例如:
@media (min-device-width:320px) and (max-device-width:768px) {
#nav {
yada: yada;
}
}
这也会改变这些宽度视角的Android设备页面的行为？或者我最后弄错了
我想说我已阅读并尝试了许多说明的变体:
我想让我的页面使用不同的CSS文件,具体取决于所使用的设备.我已经看到了许多解决方案,都使用了上面的某种形式.
然而,当在HTC Desire上进行测试时,我始终获得用于iPad的输出或完全未经过滤的输出.目前,我的测试代码基于:
http://www.cloudfour.com/ipad-css/
这是我的HTML文件:
<html>
<head>
<title>orientation and device detection in css3</title>
<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="iphone-landscape.css" />
<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="iphone-portrait.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" />
<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: 480px) and (device-height: 800px) and (orientation:landscape)" href="htcdesire-landscape.css" /> …我正在调整一个网站,以使其在iPad上感觉原生.
该网站的导航显示了悬停时子导航的下拉列表.这就像iPad上的魅力.当您触摸subnav时,当您单击/触摸其他位置时,它会再次打开和关闭.
现在我需要在再次触摸导航点时再次关闭它.
我在想,我可以pointer-events:none为iPad 设置悬停和活动,但是这会使子导航闪烁而且不起作用......
我还尝试用前置选择器的元素集覆盖导航点并将其指针事件设置为无,但这不起作用...
任何想法,我如何才能使用CSS解决这个问题.(我不能修改HTML也不能修改JS)
PS:您可以在www.macprime.ch上重现这一点...(点击顶部的主导航栏,然后尝试再次关闭下拉列表)
编辑确定我尝试了几乎只有CSS可能的一切.我认为不可能.如果有人能告诉我原因,他/她将获得赏金奖励.
我是响应式网页设计的新手,并且对于使用哪些媒体查询和设备要定位的各种偏好感到困惑.有标准吗？我想定位iphone,ipads和热门设备？
我在网上发现了这个:
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles …也许这很简单,但我还没找到答案
如何通过CSS在任何模式下检测iphone,ipad,ipad,android手机？
我只是通过css阅读这款" 检测iPhone/iPad" ,描述了如何检测所有特定设备
但我正在寻找的是区分台式机/笔记本电脑和所有ipad/ipod/iphone/android设备
我的代码有助于过滤掉仅适用于iPad的CSS.它的分辨率为1024x768.
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
}
@media all and (device-width: 1024px) and (device-height:768px) and (orientation:landscape) {
}
我想问一下这段代码是否适用于iPad 1-4,iPad Mini,iPad Air等所有iPad版本.
如果没有,我需要纯CSS代码,它将在纵向和横向模式下检测所有可能的iPad版本.还要确保代码适用于带有Retina Display的iPad 1-2和iPad.