也许这很简单,但我还没有找到答案
如何通过 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
}
关于CSS 检测 iphone ipad 或任何其他手持设备,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14914407/