Question

一般来说，CSS中设置的媒体查询是由浏览器识别的，我不知道为什么，因为我已经放了正确的元标记。它正在开发其他所有浏览器（Chrome，Opera，Firefox ......）。除了本机浏览器。

元标记：

<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">

为移动设备设置的媒体查询是：

@media screen and (min-device-width : 320px) and (max-device-width : 667px){}

@media screen and (min-device-width : 320px) and (max-device-width : 667px) and (orientation : portrait) {}

@media screen and (min-device-width : 320px) and (max-device-width : 667px) and (orientation:landscape){}

Answer 1

@media是一个较少使用的标签，你应该避免使用它，只有少数浏览器支持它，而主要的移动浏览器如Safari，UC则不会..所以尝试以其他方式编写你的代码......考虑一下这个链接 - http://www.instructables.com/id/Make-your-HTML-Website-suitable-for-Mobile-Devices/ @media是大多数浏览器不支持的标签，因为现代设备认为它们是高分辨率而不是需要@media标签的设备，如手持设备或自定义设置。@ media仅适用于打印等目的.. < / p>

Answer 2

{h}中viewport元标记重复两次，这是不正确的。此标记还具有冗余属性，使用

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

应该给出相同的结果。更多关于viewports meta tag。

HTC One Mini本机浏览器的媒体查询问题

2 个答案: