問題タブ [matchmedia]

レスポンシブ画像の置換に次のコードを使用しています。

(編集) JavaScript の新しい合理化されたバージョン:

画像変更の「画像ID＋文字列」方式がとても気に入っています。1 つのスクリプト (メディア クエリごと) で、必要な数の画像を実行できます。多くのレスポンシブ イメージ スクリプト/プラグイン/ライブラリには、これが含まれます。多くの。マークアップ。

しかし、この特定のスクリプトは、ある程度しか機能しません。

1.) もともと「onMouseOver」ロールオーバー効果用に設計されたこのスクリプトには、イベント リスナーが必要です。これはレスポンシブ イメージ スクリプトには理想的ではありません。これは、"onLoad" イベントが終了してからしばらくしてからブラウザーのサイズが変更され、モバイル デバイスの向きが変わるためです。

2.) このスクリプトは、空でない src 属性のみを変更できます (上記の例では、「test_image_small.jpg」から「test_image_large.jpg」に)。これは、両方の画像がまだロードされていることを意味し、帯域幅を浪費し、レイアウトが不愉快にジャンプします. 空の src 属性を埋めたいと思います。

だから基本的に私が必要とするもの - そして理解することができなかった - はこれです:

私は angular-app に取り組んでおり、matchmedia で向きの変更を実装しようとしています。ページを最初にロードするとき、コントローラーでコード行を実行して、横向きかどうかを確認します。

これはうまくいきます。しかし、向きの変化を検出したい場合は、次のコードを使用します。

そのため、向きが変わると、ページがリロードされ、再び向きが検出されます。しかし今、それは反対のことを返します。したがって、true である必要がある場合に、landscape == false と表示されます。これがなぜなのか誰か知っていますか？または、方向の変更に対処するために間違った手法を使用していますか? 前もって感謝します！

モバイル デバイス (この例では 700px 未満) で機能を使用し、大型デバイスで別の機能を使用しようとしています。次の方法で matchMedia を使用します。

最初は、コードは期待どおりに動作しますが、ウィンドウのサイズを変更すると問題が発生します。たとえば、ウィンドウが最初に 700px 未満で読み込まれ、次に 700px を超えるサイズに変更された場合、ボタンは最初にフェードを起動し、次にスライドし、その逆も同様です。コース外で達成したいのは、大きな画面ではスライドのみを呼び出し、小さな画面ではフェードのみを呼び出すことです。どんな助けでも大歓迎です。

乾杯！

matchmedia クエリを部分的に機能させることができました。つまり、ウィンドウのロードでは機能しますが、サイズ変更では機能しません。私はこれに本当に慣れていないので（したがってくだらない質問です）、気楽にゆっくり話してください。画面が変わったりページが読み込まれたりするたびに発火させようとしています。

http://codepen.io/anon/pen/XJZOMw

これが重複している、または単にがらくたのプログラミングである、および/または不十分に書かれている、または間違った場所にある場合は、ありがとうございます。

コードに以下の関数があります。デバイス ウィンドウ/ビューポートの幅が 768px 未満のときに関数を起動したいと思います。この関数はページの読み込み時に起動します (したがって、リスナーの外部のクエリ)。Chrome でのテスト中に、サイズ変更時にリスナーが 2 回起動し、最初に false を返し、次に true を返すことがわかりました。これは、ウィンドウ/ビューポートの幅が 768px を下回ることはないにもかかわらずです。Firefox で同じテストを行ったところ、正しく動作しているようです。

他の誰かがこれを経験しましたか? もしそうなら、あなたの解決策は何でしたか?

NB Chrome では、「Apple iPad 3/4」を選択して「デバイス モード」でテストし、Firefox では、768x1024 で動作する「レスポンシブ デザイン ビュー」を使用していました。

次のページ レイアウトを作成しましたが、javascript に大きく依存しています。これをもっと簡単に達成するための他の方法を考えてみましたが、思いつきません。

JavaScript を使用せずにこのレイアウトを実現するための素晴らしいアイデアを誰かが持っているかどうか疑問に思っていますか?

以下のページ ルーティングの matchmedia を実行するにはどうすればよいですか。つまり、タブレットの場合、ホーム用に別の templateURL をロードしますか?

画面サイズが以下の場合に正常に動作する次のコードが770pxあります(ブレークポイントによって決定されます):

問題は、ウィンドウのサイズが変更される770pxと、クラスが失われることです。

ウィンドウのサイズ変更時にクラスを変更するにはどうすればよいですか?