Question

这是我的问题：

我正在使用媒体查询来提供不同的视频（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的移动版本运行良好。

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

Answer 1

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

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

这将使您的媒体查询有效。

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

1 个答案: