メディア クエリを使用して、画面、ハンドヘルド、印刷の 3 つの異なるビューを実現するレスポンシブ デザインの Web ページがあるとします。さらに、そのような Web ページには、いくつかの JS ベースのビュー依存のレイアウト修正、ナビゲーション ロジック、コンテンツ生成マクロ、および同様のものが含まれていると仮定しましょう。
ここで、ユーザーがブラウザー ウィンドウのサイズを変更し、その内容を印刷して、私たちのデザインをいじっていると想像してください。レイアウト修正の再計算、動的コンテンツの再生成、ナビゲーションの再配置などのために、スタイルの変更 (ブラウザによって実行される) に対応したいと考えています。しかし、スクリプトで処理する「onMediaChange」イベントはありませんね。では、Web 開発者はどのようにしてメディア主導のスタイルをメディアに依存しないロジックと同期させることができるでしょうか?
この質問は、さまざまな形や開発状況で、何年もの間 StackOverlow で尋ねられてきましたが、まだ満足のいく答えは得られていません。幅ベースの条件を使用する回避策がありますが、これらは印刷ビューを処理せず、ページが読み込まれた後に発生する幅の変更にも反応しません。CSS スニッフィング ソリューションの他のグループは、間違いやすく洗練されていないポーリングに基づいています。私が探しているのは、JS と CSS をメディアの変更と同期させるための、一般的で洗練された、標準に準拠したクライアント側のソリューションです。2 つの存在しない理想的なソリューションは次のとおりです。
onMediaChangeイベントの存在。例:document.addEventListener('onMediaChange', myHandler, false);linkタグを使用してスクリプトを添付する可能性。例:<link rel="script" media="print" type="text/javascript" href="print.js"/>
この質問の範囲を超える既存の解決策、創造的な提案、理論的なコメント、または哲学的な議論に感謝します。