Opera Mobile 12.1 中的媒体查询值问题答案

【问题标题】：Problems with media query values in Opera Mobile 12.1Opera Mobile 12.1 中的媒体查询值问题
【发布时间】：2013-01-14 16:06:50
【问题描述】：

这是我的问题：

我正在使用媒体查询来提供不同的视频（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 中。

我的测试设备是：

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

三星 Galaxy S3 Mini，物理分辨率为 480x800 像素（Opera mobile 中报告的媒体查询分辨率：144dpi 和 Opera mobile 中报告的媒体查询宽度：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 的移动版本运行良好。

你有什么想法吗？我很无奈……

【问题讨论】：

标签： media-queries

【解决方案1】：

如果您忘记将以下内容添加到页面标题，大多数（如果不是所有）移动浏览器都会对您的页面进行一些调整。

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

这将使您的媒体查询工作。

【讨论】：