2

ページで matchMedia を使用していますが、Chrome for Android では一致のチェックが機能することに気付きましたが、メディア クエリにリスナーを追加しようとすると、コールバック関数が起動しません。

デスクトップで同じコードを実行しましたが、正常に動作しますが、ブラウザーとして Chrome を使用している Android 4.x デバイスのリスナーでコールバックが呼び出されないようです。これはまだブラウザに実装されていませんか?

var width768Check = window.matchMedia("(min-width: 768px)");
console.log(width768Check.matches);
console.log(width768Check.addListener);
width768Check.addListener(function(mediaQueryList) {
    console.log(mediaQueryList.matches);
});

アップデート

Google Chrome v18.0.1025469 と Android v4.2.1 を搭載した Nexus 7 タブレットと、同じバージョンの Google Chrome と別のバージョンの Android v4.0.3 を搭載した Asus Transformer タブレットを使用してテストを行っています。

面白いことに、Asus タブレットはリスナー コールバック関数を正しく使用していますが、Nexus 7 はそうではありません。新しいバージョンの Android オペレーティング システムで同じバージョンの Chrome を使用しても問題が発生する理由はわかりません。また、Nexus 7 の場合、Dolphin Browser をダウンロードしたところ、すべて正常に動作しました。

4

3 に答える 3

0

軽量のInquire .jsライブラリを試すことができます。これは、一致および不一致 + 初期オプション関数のコールバックを処理します。Chrome ブラウザーを搭載した Android デバイスではうまく動作するようですが、現在、ネイティブ ブラウザーで向きの一致をトリガーするのに苦労しています。

また: Paul Irish は、matchMediaの独自の実装を行っています。

于 2015-03-18T17:14:38.767 に答える
0

私もこの問題に遭遇し、少なくとも Web で、回避策の興味深い提案を見つけました。

WebKit のメディア クエリ リスナー

そして、Chrome を搭載した iPhone 4S と (重要!) Chrome を搭載した Samsung Galaxy Nexus (またはその程度) でもこのソリューションをテストしましたが、うまくいきました。

少し醜いですが、(ドキュメントまたは画面で) 正常に機能する orientationchange イベントを待つよりはましだと思います。

于 2013-11-01T14:10:14.753 に答える
0

ビューポートの表示幅をデバイス ピクセルに設定すると、画面のサイズは 601x880 ピクセルになり、デバイスのピクセル密度 (N7 では 1.3) に基づいて縮小されます。

これは、あなたが見ているものを説明し、ここのテストで見られるように: http://jsbin.com/eyorap/latest

ビューポートの幅を設定しないと、screen.width が 601 を報告しても、実際のデバイスの幅を使用する必要があるため、メディア クエリは一致します。このデモを参照してください: http://jsbin.com/igifon

于 2013-03-01T00:01:54.363 に答える