1

一部の要素が 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: Android デバイスでのみ表示されます

img5: すべてのデバイスでのみ表示

ここで別の質問をしましたが、重要なトリッキーなことが 1 つあります。すべてを適用した後、後で変更する必要があるのは HTML だけです。後で jquery と css ファイルを変更することはできません。各画像にのみ手動でクラスを追加できるため、操作できるのは、純粋な html からクラスを手動で追加および削除することだけです。どうすればいいですか?したがって、class="iphone android" を追加すると、この 2 つのシステムで画像が表示されます。また、一般的にはiOXでできますか?iPhone、iPod、iPadなどで動作しますか?. あなたの助けと時間をありがとう。

ところで。私はさまざまな解像度でそれを行う方法を知っていますが、ここではオペレーティングシステムごとに特別に必要なので、ユーザーをAndroidマーケットに導くボタンがある場合、特定のボタン/画像をAndroidデバイスにのみ表示する必要があります...など ありがとう

4

3 に答える 3

2

CSSメディアクエリはブラウザ認識を行いません。これはあなたが望むものです。Webサイトを表示しているブラウザを特定する必要がある場合は、ユーザーエージェント文字列を「スニッフィング」する必要があります(これは完全に信頼できるものではありません)。

これを行うには、Javascript、phpなどを使用できますが、単なるhtmlではありません。

試すことができるものへのリンクは次のとおりです。

http://graphicmaniacs.com/note/detecting-iphone-ipod-ipad-android-and-blackberry-browser-with-javascript-and-php/

于 2013-03-05T11:55:48.857 に答える
2

CSS3 Media QueriesCSSで簡単に目的を達成できます..

また、CSS3 メディア クエリの使用方法については、以下の記事を参照してください。非常に役立ちます。

標準デバイスのメディア クエリ

CSS3 メディア クエリを使用して Web サイトのモバイル バージョンを作成する方法

于 2013-03-05T11:46:54.560 に答える
0

スタイルシートが iOS/android で同じ場合、このようなことができます。

<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="css/mobile.css" type="text/css" />

しかし、それが iOS か Android かを検出しようとしている場合は、検出を行う必要があります。

モバイル開発を容易にするという点では、たくさんのものがあります:

http://www.phonegap.com/

http://www.sencha.com/products/touch/

http://www.appcelerator.com/

http://www.jquerymobile.com/

http://www.jqtouch.com/

あなたが始めるためにいくつかあります:)

お役に立てれば。

于 2013-03-05T11:52:16.567 に答える