jquery - 如何为 iPhone 或 Android 使用不同的样式表？我以后只能修改html

Question

我正在尝试创建一个页面，其中某些元素仅对 Android 和 iPhone 可见。我正在考虑使用简单的 css 属性来隐藏元素，例如:

HTML:

<style>img{ display:none;} </style>

<img src="img1.jpg" class="other">
<img src="img2.jpg" class="iphone android">
<img src="img3.jpg" class="iphone">
<img src="img4.jpg" class="android">
<img src="img5.jpg" class="iphone android other">

CSS 1(适用于 iphone/android 以外的设备)

.other{ display:inline;}

CSS 2(适用于 iPhone)

.iphone{ display:inline;}

CSS 3(适用于 Android)

.android{ display:inline;}

我现在需要的是以某种方式检测设备(我相信它可以通过 jQuery 完成并实现正确的 CSS 样式表)。

所以效果是:

img1:仅在iphone和android以外的设备上显示

img2:仅在 iPhone 和 Android 设备上显示

img3:仅在 iPhone 上显示

img4:仅在Android设备上显示

img5:仅在所有设备上显示

我在这里做了另一个主题another question ，但有一件重要的棘手事情。 应用完所有内容后，我稍后只需要更改 HTML，稍后我将无法触及 jquery 和 css 文件，因此当我执行它们时，它们必须保持不变。我只能手动向每个图像添加类，所以我唯一可以操作的就是从纯 html 中手动添加和删除类。我该怎么做？因此，如果我添加 class="iphone android"，那么图像将显示在这两个系统上。 一般情况下我可以通过 iOX 来完成吗？那么它可以在 iphone、ipod、ipad 等上运行吗？。感谢您的帮助和时间。

顺便说一句。我知道如何针对不同的分辨率执行此操作，但在这里我需要专门针对每个操作系统，因此如果我有一个按钮引导用户进入 Android 市场，我需要仅在 Android 设备上显示特定的按钮/图像...等等。谢谢

Answer 1

您可以通过CSS中的CSS3 Media Queries轻松实现您的愿望..

关于如何使用 CSS3 媒体查询，请阅读下面提到的文章，它们非常有帮助。

Media Queries for Standard Devices

How To Use CSS3 Media Queries To Create a Mobile Version of Your Website