問題タブ [matchmedia]

私の S3 では、Chrome と Firefox の両方が、ポートレート モードのときにランドスケープ モードであることを示す matchMedia イベントを発生させ、データ入力フィールドに触れてデータを入力します。私のiPadでは、これは起こりません。方向が変更されていないのに変更されたことを発表することは、確かに望ましくありません。これは、仕様ごとの誤った横向きイベントですか? home.comcast.net/~tommoran4/bug.htm に問題が示されています。

短いバージョン:この if/else ステートメントにエラーはありますか?

私がする必要があるのは、ドキュメントの幅を確認し、それに応じてページの高さを調整することです。ドキュメント > 幅 1161 ピクセルの場合、高さ = 8500 ピクセル。それ以外の場合、高さ = 12800px。

フルバージョン:左のサイドバーに繰り返し画像があり、メイン コンテンツにフォト ギャラリーがあるサイトで作業しています。ユーザーが下部の「See More」をクリックすると、さらに画像が表示されます。これが発生した場合、左側のサイドバーの画像をページの高さ全体に拡張する必要があります。私のPCでは問題なく動作するようですが、iPadでは動作しません。具体的には、ページは正しい高さで読み込まれますが、[もっと見る] をクリックすると、if/then ステートメントが機能しないため、「else」ではなく「if」から高さが引き出されます。

ステージング サイトはこちらからご覧いただけます。

私が知る限り、caniuseの助けを借りwindow.matchMediaて、ほとんどの一般的なブラウザーでサポートされていますが、IE<10 は例外です (これらは最近ではあまり人気がありません)。

IE<10 などのサポートされていないブラウザが、モバイル プラットフォームで多く存在するかどうかを知っている人はいますか?

これは、私が書いているポリフィルについて実用的な決定を下すのに役立ちます。つまり、matchMedia()サポートされていない場合は、おそらくデスクトップ ブラウザーであり、そこから取得できます。

ありがとう

誰かが助けて、次のコードが機能しない理由を説明できますか? 理由がわかりません... 私にとっては、すべてが機能しているはずです。

これは、動作する CSS 部分だけの jsfiddle です。https://jsfiddle.net/24r9cax6/

その関数にアラートを入れてメディア マッチ パーツをテストしたところ、window.load でアラートをポップすることができましたが、CSS コードが機能しません。CSS コードを Web サイトで実行して、サイドバーをメイン コンテンツと同じ高さにすることができませんでした。js を head と body の最後に配置しました。変化なし。

サイトはWPで構築されています。コンテンツは動的にロードされるので、コンテンツがロードされる前に高さを実行していると思っていましたが、それは window.load() が修正するはずですよね?

こちらのサイトの記事が参考になります。サイドバーを mainContent div と同じ高さにして、灰色の背景がページの下まで続くようにします。ただし、タブレット サイズ以上でのみ (ブートストラップを使用)。

http://www.businesstransitionandexitplanning.com/turning-business-income-into-retirement-income/

ビューポート >= 768px のファンシーボックスをトリガーし、ビューポート <768px のスワイプボックスをトリガーしようとしています。残念ながら、どちらも今は開きません...何が欠けていますか? ご協力いただきありがとうございます！私はたくさんのCSSを持っているので、JSを追加しているだけです（構文エラーだと確信しています...）。

次のコードを実行しています。

このチェックが false を返す理由はありますか? これは、さまざまなオペレーティング システムの Firefox ブラウザでのみ発生します。関連する詳細の 1 つは、このコードが広告ユニット内で実行されていることです。HTML5 広告ユニット内で実行されることもあります。

これは、Windows 7、Windows 8、Windows 10、Mac OS X 10.8、およびその他のいくつかのオペレーティング システムで発生し、Firefox のバージョンは 36 から 41 の範囲です。

編集: このバグ レポートはこちらで見つかり、Mac OS X 10.10 の Firefox 41 で複製できました - matchMedia は非表示の iframe 内で正しく実行されません。

特定の画面サイズ (>60em および <90em) で 2 つの div (aside および .related) の周りにラッパーを追加するために何時間も試みています。私はこれを matchMedia と eventListener で行っています。適切な場所にラッパーが追加されているように見えますが、問題は、サイズの条件が満たされていない場合でもまだそこにあることです。

ここに jsfiddle があります: http://jsfiddle.net/Vanilla__/4q26ngmg/1/

簡略化された HTML:

Javascript:

別の画面サイズがあるときに子を削除する（removeChildを使用）またはeventListenerを削除する（removeEventListenerを使用）ために「else」を追加したかったのですが、関数が定義されていないというエラーやその他のエラーが表示されます。

画面サイズが >60em および <90em でない場合にラッパーを削除する方法を知っている人はいますか? 私はJavascriptの新人です（明らかかもしれません;））。どんな助けでも大歓迎です。

window.matchMedia は機能していますが、「@media only screen and」を使用すると、画面が狭まるときに動作するように動作すると思いました。たとえば、デスクトップ ブラウザを使用している場合は、window.matchMedia を使用して画面をロードまたは更新する必要があります。window.matchMedia を @media CSS のように機能させる方法はありますか? 画面を更新または (再) ロードする必要なく、画面幅を増減すると自動的に発生しますか?

以下で使用されている例: Americastributetoparis.com

});