html - 如何仅为 ipad 附加一个特殊类 - 引导程序

Question

在网站桌面版看起来很精致，风格也很完美。但是当我在 iPad 中查看网站时，某些区域需要更多样式（更多填充和边距）。

我想要做的是向 div 添加一个特殊的类，以便它仅在我在 iPad 上查看时适用。然后特定的类可以处理所有额外的样式。

用户是否正在通过 iPad 查看是否有远距离跟踪？我该怎么做？有什么解决办法？

score 3 · Accepted Answer

var isiPad = /ipad/i.test(navigator.userAgent.toLowerCase());

if (isiPad)
{
  ...
}

score 2 · Accepted Answer

试试这个

var ipad = navigator.userAgent.match(/iPad/i) != null;

if (ipad) $("#div").addClass('ipadClass');

score 1 · Accepted Answer

众所周知，浏览器/设备检测很难正确进行 - 部分原因是历史原因（竞争渲染引擎、用户代理欺骗），部分原因是设备发布的用户代理过多（请参阅此处获取代理/设备的不完整列表）。

可以（简单地）在此处的答案中使用该方法，或者使用类似UA-Parser-js之类的东西- 基于 JavaScript 的用户代理字符串解析器，它试图提供：

（它有效，但有缺陷）。

除非您正在设计一个专门用于 iPad的基于 Web 的应用程序，否则您应该使用一些 CSS 媒体查询，这些查询会根据浏览器/视口的宽度重排内容——移动设备的一个示例可能是：

@media only screen and (max-device-width: 480px) {
    div#wrapper {
    width: 400px;
}

Twitter bootstrap 还带有响应式布局...在任何一种情况下，您都必须同时满足纵向和横向模式以及 iPad 的不同版本和分辨率这一事实，这将影响质量，尤其是对于给定 Retina 的图像后期机型展示：

第一代和第二代： 1024 × 768 像素（132 PPI 4:3 纵横比）

第三和第四代： 2048×1536 像素（264 PPI）

迷你： 1,024x768 像素 (163 PPI)

3 回答 3