2012-12-11 1 views
15

ブラウザの名前を特に確認せずに、ブラウザが特別な "ネイティブ"スタイルのドロップダウン(iPhoneやiPodなど)を表示するかどうかを確認したいと思います。ユーザーエージェントを名前で見ることなく、より一般的な方法でその機能を確認することは可能ですか?モバイルブラウザに「ネイティブ」のドロップダウンコントロールが表示されるかどうかを検出するにはどうすればよいですか?

これを使用して、標準またはさらに強化されたドロップダウンコントロールをレンダリングするかどうかを判断したいと思います。

+0

モバイルブラウザがHTML選択入力をレンダリングする方法を指していますか?ここでの「特別な」の定義は何ですか? –

+0

ああ、。 iPhoneのように入力コントロールを選択してください。基本的には、ブラウザがセレクトインラインをレンダリングせず、それ自身の特別なコントロールをポップアップするかどうかを検出する方法があるかどうか疑問です。ありがとう。 – Jason

+0

解決方法を見つけましたか?たぶん 'window.orientation'を見て?たぶん、これらのモバイルデバイスは、今日、素敵で使いやすいネイティブの選択(複数か否か)のコントロールを表示するでしょうか? – cherouvim

答えて

0

私はこの質問を読んだので、私は汚い解決策のアイディアを得ました。ちょうど推測だが多分助けてくれるだろう:

ネイティブ要素をHTMLに置き、elementFromPoint関数でJavaScriptで取得しようとするとよいでしょう。 (MDN link

返された要素がない場合や返された要素が元のものでない場合は、表示されません。

3

私はこれが本当に貧弱な解決策なしでは実際には可能ではないと思います。ほとんどすべてのモバイルブラウザがネイティブddlを使用してオプションを表示するので、デバイスを検出するだけです。

これはModernizrのメディアクエリーとタッチ検出使用することによって達成することができます。

if (Modernizr.touch && Modernizr.mq('only screen and (max-width: 768px)') { 
    //it is a mobile/tablet device 
} 

または通常のCSSメディアクエリを使用します。

1

現在、window.orientationの存在を確認しています。アンドロイドとiosの仕事をしているようです。

+0

迅速かつ汚れていますが、 Modernizrに依存関係を追加したくない場合は、ジョブ – baxeico

0

あなたは

-webkit-appearance: none; 
    -moz-appearance: none; 
    appearance:  none; 

外観CSSのプロパティを確認することができますし、それが「どれも」ではないんならば、あなたの入力は、ネイティブなスタイリングを持っています。

あなたがここに出現の可能な値を見つけることができます: https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance、ここhttp://trentwalton.com/2010/07/14/css-webkit-appearance/

2

を、私はこの回答の90%確信している:いいえ

あなたがAであるかどうかを検出するために探していますブラウザはweirdと表示されますが、あなたは主観的にweirdと定義しています。ユーザーRedaの答えは正しいですが、あなたの質問の一部に違反しています(名前でブラウザを特定することはありません)。私の主張は、修飾子が主観的であるためブラウザを名前で識別する必要があるため、JS/CSSテストを見つけられません。

ブラウザは、表示するドロップダウンを完全に制御できます。ほとんどは、これらのドロップダウンコンポーネントでのCSSの実装と矛盾しています。ブラウザーがアプリケーションレベルでドロップダウンに関する情報を公開する必要があるという標準はありません。

あなたが望むものに影響を与えるには、ドロップダウンコントロールが好きではないブラウザを見つけてリストし、Modernizrなどのトリッキーでそれらをターゲットにする必要があります。残念ながらあなたの質問の意図に違反するので、あなたの実際の質問に対する答えは、いいえ、申し訳ありません。

関連する問題