也许这很简单,但我还没找到答案 如何通过CSS在任何模式下检测iphone,ipad,ipad,android手机? 我看了这个 Detect iPhone/iPad purely by css 描述了如何检测所有特定设备 但我正在寻找的是区分台式
如何通过CSS在任何模式下检测iphone,ipad,ipad,android手机?
我看了这个
Detect iPhone/iPad purely by css
描述了如何检测所有特定设备
但我正在寻找的是区分台式机/笔记本电脑和所有ipad / ipod / iphone / android设备
以下是关于此事的说明:对于任何设备 – 对其屏幕大小和比率进行研究,然后在样式表中为每个设备执行@media查询.iPhone4的
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />
(iPad上的(肖像或风景)
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
手机肖像
@media screen and (max-device-width: 480px) and (orientation: portrait){ /* some CSS here */ }
手机景观
@media screen and (max-device-width: 640px) and (orientation: landscape){ /* some CSS here */ }
手机肖像或风景
@media screen and (max-device-width: 640px){ /* some CSS here */ }
iPhone 4纵向或横向
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){ /* some CSS here */ }
仅限iPhone 5
@media only screen and (min-device-width: 640px) and (max-device-width: 1136px) and (- webkit-min-device-pixel-ratio: 2) { /* styles here */ }
iPhone< 5:宽高比
@media screen and (device-aspect-ratio: 2/3) {}
平板电脑肖像或风景
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){ /* some CSS here */ }
台式机
@media screen and (min-width: 1024px){ /* some CSS here */ }
仅两种尺码之间的样式.
@media screen and (min-width: 319px) and (max-width: 1281px){}
BTDUBS – 你知道WordPress内置了一个is_iphone()全局吗?
global $is_iphone; if ( $is_iphone ) { // do something if $is_iphone is true }