如何使用不同的样式表为iphone或Android？ [英] How to use a different stylesheet for iphone or android?

问题描述

我试图做一个页面，其中一些元素将只有Android和iphone可见。我正在想使用简单的css属性来隐藏元素，例如：

I'm trying to make a page where some elements will be visible only for android and iphone. I was thinking of using simple css properties to hide the elements e.g.:

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的设备）

CSS 1 (for devices different than iphone / android)

.other{ display:inline;}

CSS 2（for iphones）

CSS 2 (for iphones)

.iphone{ display:inline;}

CSS 3（适用于Android）

CSS 3 (for androids)

.android{ display:inline;}

我现在需要的只是检测设备通过jQuery和实现正确的CSS样式表）。

All I need now is to detect the device somehow ( I belive it can be done by jQuery and implement the correct CSS stylesheet).

因此效果是：

img1：只显示在iphone和android以外的设备上

img1: displayed only on devices other than iphone and android

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

img2: displayed only on iphone and android devices

img3：只显示在iphones上

img3: displayed only on iphones

img4：只显示在Android设备上

img4: displayed only on android devices

img5：只显示在所有设备上

img5: displayed only on all devices

如何获取浏览器选择合适的样式表？
我知道如何通过解决办法，但我知道对于操作系统它的工作不同，可以在jquery中完成。这将是完美的，如果我可以在一个部分，所以我可以在整个页面上使用样式。感谢您的时间和帮助。

how can I get the browser to select the proper stylesheet? I know how to do it by resolution, but I know for the operating systems it works different and can be done in jquery. It would be perfect if I can do it in a section, so I can use styles on the whole page. Thank you for your time and help.

推荐答案

您可以通过 javascript like：

You can do it by javascript like:

根据这些点

img1: displayed only on devices other than iphone and android    
img2: displayed only on iphone and android devices
img3: displayed only on iphones    
img4: displayed only on android devices
img5: displayed only on all devices

CSS

.show{display:block;}
.hide{display:none;}

HTML

<div id="imageContainer">
    <img src="img1.jpg" id="image1" class="hide">
    <img src="img2.jpg" id="image2" class="hide">
    <img src="img3.jpg" id="image3" class="hide">
    <img src="img4.jpg" id="image4" class="hide">
    <img src="img5.jpg" id="image5" class="hide">
</div>

SCRIPT

var IS_IPHONE = navigator.userAgent.match(/iPhone/i) != null;
var IS_ANDROID = navigator.userAgent.match(/Android/i)  != null;

if(IS_IPHONE)
{
    $('#image3, #image2').removeClass('hide').addClass('show');
}
else if(IS_ANDROID)
{
    $('#image4, #image2').removeClass('hide').addClass('show');
}
else
{
    $('#image1').removeClass('hide').addClass('show');
}
$('#image5').removeClass('hide').addClass('show');

这篇关于如何使用不同的样式表为iphone或Android？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！