問題タブ [browser-feature-detection]

基本的な Web アプリを作成しましたが、スタンドアロン モードでない場合 (つまり、ホーム画面にない場合) に表示される小さな "ホーム画面に追加するには、ここをクリックしてください" というポップアップが表示されます。ユーザーにアプリへのリンクをメールで送信する基本的な登録システムがありますが、iOS Gmail アプリからリンクを開くと、オプション メニューのある下部のバーは表示されませんが、ポップアップは引き続き表示されることに気付きました。

Mobile Safari ブラウザー アプリ自体ではなく、Gmail アプリ内にいることを検出するためにプルできるデバイス、ブラウザー、またはナビゲーターのプロパティはありますか? ありがとう。

特にすべての主要なブラウザで実際に機能する方法で、ブラウザが transitionend イベントをvanillaJsでサポートしているかどうかを検出する簡単な方法を見つけた人はいますか? :(

私はここでこの未回答のスレッドを見つけました: Test for transitionend event support in Firefox、およびかなり多くのほとんど機能するハック。

現在、すべてのベンダープレフィックスにイベントリスナーを一括で追加していますが、うまくいきます (見るたびに目を痛める恐ろしいアプローチだとは思いますが)。しかし、IE8 と IE9 ではまったくサポートされていないため、これら 2 つを検出して、別々に処理する必要があります。

私はこれをブラウザのスニッフィングなしで、そして間違いなくjQueryのような巨大なライブラリ/フレームワークなしで行うことを好みます

私の問題を説明する jsfiddler スニペットを作成しました。ダイアログを表示するボタンがあります。閉じるをクリックしてダイアログを削除すると、上部と不透明度で遷移し、遷移が終了した後は display=none になるはずです。ただし、transitionend が起動されない場合 (IE8 や IE9 のように)、ダイアログは削除されず、[ダイアログの表示] ボタンを覆い隠し、UX を破壊します。transitionend が機能していないことを検出できれば、それらのブラウザーを閉じるときに display=none を設定するだけで済みます。

http://jsfiddle.net/QJwzF/22/

Opera、Firefox、Chrome、IE10 では動作しますが、IE8 と IE9 では動作しません (afaik)

問題をうまく説明できなかった場合は、お知らせください。:)

最新の jQuery および jQuery-ui と他のプラグインを使用する既存のコード ベースがあります。このコード ベースで使用されている機能をサポートしていないブラウザを検出し、ブラウザが完全にはサポートされていないことをユーザーに警告し、ブラウザのアップグレード/切り替えを提案するよう依頼されました。

このタスクに適したツールは、Modernizr のようなものです。問題は、コードの各行を自分で確認しないと、どの機能が使用されているか、または使用されていないかがわからないことです。そのため、特定のブラウザーがサポートされていることを確認するためにテスト ケースを作成する方法がわかりません。

現在使用している機能を特定するために使用できるスクリプトまたはツールはありますか? または、これを簡単にするために使用できる既存のチェックのセットはありますか?

Web サイトで jQuery UI のドラッグ アンド ドロップを使用しています。モバイルデバイスは一般的にこの機能をサポートしていないので、この機能が機能するかどうかを検出し、機能しない場合の代替手段を提供する最も簡単な方法は何ですか.

注: 私はブラウザ検出よりも機能検出を好みます。

この質問は、ブラウザの検出よりも機能の検出を支持するすべての人に特に当てはまります。

以前はブラウザ検出を使用して、Firefox と IE で埋め込みページの一部を切り取っていた iframe のサイズを変更していましたが、IE 11 では機能しなくなりました。

別のドメインのページがi フレームとして表示されています。外部ページの唯一のものは、書式設定されたテキストです。すべてのテキストを完全にフレーム化するためにクロムで必要なものに基づいて、iframe の高さを設定します。Safari と Opera は Chrome の設定で動作しますが、Firefox と IE は iframe のページを chrome よりも大きく表示し、テキストの一部が切り取られます。Firefox または IE が検出された場合に高さを変更する関数を使用してこれを解決しました。

これは、IE がユーザー エージェント文字列を変更するまで問題なく機能していました。

そこで私は、ブラウザーを検出するのではなく、機能を検出すると言うすべての人々に耳を傾けることにしました。

問題: どのような機能ですか?

可能であれば、機能検出を使用してこの問題を解決する方法について、私は完全に途方に暮れています。

CSS3 サイズ変更スタイル宣言を使用している iframe があります。

私は Modernizr を使用cssresizeしてブラウザーでサポートされているかどうかを検出しているので、テストが失敗したときに代わりに jQuery UI Resizable プラグインを使用できます。

ただし、Firefox は iframe での CSS のサイズ変更 ( JSFiddle )をサポートしていないようですが、Firefox はテキストエリアのサイズ変更をサポートしているため、Modernizr テストはとにかく合格します。これにより、CSS または JS のサイズ変更機能がなくても、Firefox に iframe が残ります。

機能検出を使用して、ブラウザーが iframe で CSS3 のサイズ変更をサポートしていることを確認するにはどうすればよいですか?

OSX の Safari 6.1 および 7 で省電力モードが有効になっていると、YouTube プレーヤーの読み込みに失敗するという問題が発生しています。YouTube ユーザーが実験的な HTML5 プレーヤーを使用している場合、この問題は発生しませんが、まだベータ版であり、ほとんどの人はまだ Flash プレーヤーを使用しています。「電力を節約するためにプラグインを無効にする」オプションは、ほとんどの新しいバージョンの Safari でデフォルトでオンになっています。これにより、プレーヤーを初期化しようとするときに、YouTube iFrame API が無限ループに入ります。

windowまたはnavigatorオブジェクトに、ユーザーに警告できるように省電力モードが有効になっていることを示す可能性のある属性はありますか?

ブラウザが CSS @supports 機能をサポートしているかどうかを確認するにはどうすればよいですか? Internet Explorer と Safari はそれをサポートしていないため、私の Web アプリはこれらのブラウザーでどのスタイルを適用すればよいかわかりません。