我正在尝试制作一个页面,其中某些元素仅对 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{ display:inline;}
我现在需要的只是以某种方式检测设备(我相信它可以通过 jQuery 完成并实现正确的 CSS 样式表)。
所以效果会是:
img1:仅在 iphone 和 android 以外的设备上显示
img2:仅在 iphone 和 android 设备上显示
img3:仅在 iphone 上显示
img4:仅在安卓设备上显示
img5:仅在所有设备上显示
我在这里做了另一个主题另一个问题,但是有一个重要的棘手的事情。应用完所有内容后,我以后只需要更改 HTML,以后我将无法触摸 jquery 和 css 文件,因此我将这样做,它们必须保持不变。我将只能手动为每个图像添加类,所以我唯一能操作的就是从纯 html 中手动添加和删除类。我该怎么做?因此,如果我添加 class="iphone android",那么图像将显示在这两个系统上。我也可以通过iOX来做吗?那么它适用于 iphone、ipod、ipad 等设备吗?. 感谢您的帮助和时间。
顺便提一句。我知道如何针对不同的分辨率执行此操作,但在这里我需要针对每个操作系统,所以如果我有一个将用户引导到 android 市场的按钮,我需要特定的按钮/图像仅在 Android 设备上显示...等谢谢