当前位置 : 主页 > 网页制作 > css >

CSS检测iphone ipad或任何其他手持设备

来源:互联网 收集:自由互联 发布时间:2021-06-13
也许这很简单,但我还没找到答案 如何通过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
 }
网友评论