0

これが私の問題です：

私はメディアクエリを使用して、デバイスの解像度に応じてさまざまなビデオ（5つの異なる解像度）を提供しています。私のメディアクエリでは、「幅」と「解像度」を求めています

HTML5ビデオ要素内で使用するコードは次のとおりです。

<source src="640x360_15.webm" type="video/webm" media="only screen and (max-width:532px) and (min-resolution: 144dpi)">

<source src="960x540_15.webm" type="video/webm" media="only screen and (min-width:533px) and (max-width:757px) and (min-resolution: 144dpi)">

<source src="1280x720_15.webm" type="video/webm" media="only screen and (min-width:758px) and (max-width:910px) and (min-resolution: 144dpi)">

<source src="1600x900_15.webm" type="video/webm" media="only screen and (min-width:911px) and (max-width:1120px) and (min-resolution: 144dpi)">

<source src="1920x1080_15.webm" type="video/webm" media="only screen and (min-width:1121px) and (min-resolution: 144dpi)">

私の問題（これについてはすぐに説明します）は、OperaMobile12.1でのみ発生します。

私のテストデバイスは次のとおりです。

540x960ピクセルの物理解像度を持つHTCOneS（Opera Mobileで報告されたメディアクエリ解像度：144dpiおよびOpera Mobileで報告されたメディアクエリ幅：360）

物理解像度が480x800ピクセルのSamsungGalaxyS3 Mini（オペラモバイルで報告されたメディアクエリ解像度：144dpiおよびオペラモバイルで報告されたメディアクエリ幅：320）

報告されたメディアクエリ値については、このツールを使用しました：http: //pieroxy.net/blog/pages/css-media-queries/test-features.html

ここで問題：両方のデバイスでのメディアクエリがsrc： "640x360_15.webm！につながると思いますが、srcは実際には"1600x900_15.webmです。すでに述べたように、問題はOperaMobileでのみ発生します。Safari、Chrome、Firefoxのモバイルバージョンはうまく機能します。

あなたはなにか考えはありますか？私は無力です...

4

1 に答える 1

0

ほとんどの (すべてではないにしても) モバイル ブラウザは、ページ ヘッドに以下を追加するのを忘れた場合、ページに何らかの調整を行います。

<meta name="viewport" content="width=device-width, initial-scale=1.0,
          maximum-scale=10.0, user-scalable=yes" />

これにより、メディアクエリが機能します。

于 2014-01-23T13:12:28.970 に答える