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)">

我的问题（我将很快解释）仅出现在 Opera Mobile 12.1 中。

我的测试设备是：

物理分辨率为 540x960 像素的 HTC One S（opera mobile 中报告的媒体查询分辨率：144dpi，opera mobile 中报告的媒体查询宽度：360）

三星 Galaxy S3 Mini，物理分辨率为 480x800 像素（在 Opera 中报告的媒体查询分辨率：144dpi，在 Opera 中报告的媒体查询宽度：320）

对于报告的媒体查询值，我使用了这个工具： http: //pieroxy.net/blog/pages/css-media-queries/test-features.html

现在的问题：我会假设我在两个设备上的媒体查询都会导致 src：“640x360_15.webm！但 src 实际上是”1600x900_15.webm。正如我已经说过的，这个问题只发生在opera mobile中。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 回答