2

一部の要素が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：すべてのデバイスにのみ表示

ブラウザに適切なスタイルシートを選択させるにはどうすればよいですか？私は解決によってそれを行う方法を知っていますが、オペレーティングシステムではそれが異なって動作し、jqueryで実行できることを知っています。セクションでそれができれば完璧なので、ページ全体でスタイルを使用できます。お手数をおかけしますが、よろしくお願いいたします。

4

5 に答える 5

2

また、conditionizrを見てください、それはあなたのニーズに非常に適しているようですhttp://conditionizr.com/

于 2013-03-05T10:44:52.637 に答える
1

私のコードは、スタイルを適用したり、DOMを動的に読み取ったりしないという点で、他のソリューションとは異なります。デバイスを検出し、クラスを設定して、残りをCSSに任せます。これは、スクリプトをすぐに実行して（必要な画像の数や不要なものを知らなくても）、必要に応じてHTMLとCSSを拡張できることを意味します。また、パフォーマンスがはるかに高く、ライブラリを必要としません。

まず、CSSを次のように変更します。

img{
  display:none;
}

html.other .other{
  display:inline;
}

html.iphone  .iphone {
  display:inline;
}

html.ipad    .ipad   {
  display:inline;
}

html.android .android{
  display:inline;
}

基本的に、デバイスが何であるかを推測するためにHTMLのクラスに依存しています。一般的なiOSが必要な場合は、画像に別のクラスを追加して、以下を追加できます。

html.ipad    .ios,
html.iphone  .ios    {
  display:inline;
}

次に、スクリプトを実行してそれを推測し、ユーザーエージェント文字列に基づいて適用します（私が恐れているのは、これが最善の方法です！）：

void function setUAclass(){
  var ua      = navigator.userAgent.toLowerCase();
  var agent   = 'other';
  var classes = [
    'ipad',
    'iphone',
    'android'
  ];

  for(var i = 0, l = classes.length; i < l; ++i){
    if(ua.indexOf(classes[i]) >= 0){
      agent = classes[i]
    }
  }

  document.lastElement.className += ' ' + agent;
}();

これは、ドキュメントのどの時点でも、jQueryなしで実行できます。DOMの準備が整うのを待つ必要はありませんdocument.lastElement。navigator.userAgentこれは、スクリプトを実行できるようになるまでに、いつでもすぐに利用できるためです。

于 2013-03-05T11:55:43.787 に答える
1

デバイスに応じて適切なcssをロードする単純なphpコードでそれを行います：

<?php 
$iphone = strpos($_SERVER['HTTP_USER_AGENT'],”iPhone”);
$android = strpos($_SERVER['HTTP_USER_AGENT'],”Android”); 
$palmpre = strpos($_SERVER['HTTP_USER_AGENT'],”webOS”);
$ipod = strpos($_SERVER['HTTP_USER_AGENT'],”iPod”); 
if($iphone) { ?>
    <link rel="stylesheet" type="text/css" href="iphone.css">
<?php }  else if ($android) { ?>
    <link rel="stylesheet" type="text/css" href="android.css">
<?php } ?>
于 2013-03-05T10:43:32.260 に答える
1

あなたは次のようにそれを行うことができますjavascript：

これらのポイントに従って

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>

脚本

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');
于 2013-03-05T10:38:37.747 に答える
1

javascript / jquery navigatorobjを使用してこれを達成できます、

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


   if ((navigator.userAgent.match(/iPhone/)) || (navigator.userAgent.match(/iPod/))) {
     // changing class of the dom element
     $('#img2').addClass('iphone');
     $('.iphone').show();
   }

   else if (navigator.userAgent.match(/Android/)) {
    $('#img2').addClass('android');
    $('.android').show();
   } 

   else {
     $('#img1').addClass('other');
     $('#img3').addClass('other');
     $('.other').show();
  }
于 2013-03-05T10:38:41.240 に答える