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

【问题标题】：CSS detect either iphone ipad or any other handheldCSS 检测 iphone ipad 或任何其他手持设备
【发布时间】：2013-02-16 19:45:50
【问题描述】：

也许这很简单，但我还没有找到答案

如何通过 CSS 检测任何模式的 iphone、ipad、ipad、android 手机？

我读过这个 Detect iPhone/iPad purely by css 描述如何检测所有特定设备

但我正在寻找的是区分台式机/笔记本电脑和所有 ipad/ipod/iphone/android 设备

【问题讨论】：

标签： css

【解决方案1】：

以下是我对此事的说明：对于任何设备 - 研究其屏幕尺寸和比例，然后在您的样式表中为每个设备执行 @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

@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
 }

【讨论】：

谢谢 Ben - 但我会说最初的查询更多地与：移动设备和笔记本电脑/台式机之间的区别是什么简单的 CSS 方式
只有我朋友研究的屏幕尺寸！如果您遇到其他问题，请在此处发布。
非常感谢！似乎媒体查询“手持”看起来像一个选项，但没有人实现它

【解决方案2】：

您可以使用@media 查询来解决您的问题，您可以尝试以下方法。您还可以将设备方向设置为针对您的设备的设置，或者设置您的最大宽度，如下所示，然后编写您的 css。希望这会有所帮助。

@media screen and (max-device-width: 480px) {
  .class {
    background: #000;
  }
}

【讨论】：