Question

这是媒体查询的网格设置。但是，它在我的手机上显示了980px。

 @import "grid/grid";

 $display_320: 'only screen and (max-width: 479px)'; $display_480:
 'only screen and (min-width: 480px) and (max-width: 767px)';
 $display_768: 'only screen and (min-width: 768px) and (max-width:
 985px)'; $display_1024: 'only screen and (min-width: 986px)';

 @media #{$display_320} {   @import "grid/grid_320"; } @media
 #{$display_480} {   @import "grid/grid_480"; } @media #{$display_768} {   @import "grid/grid_768"; } @media #{$display_1024} {   @import
 "grid/grid_1024"; }

我的手机假设是320px，但它说是980px。我必须在我的HTML中做任何事吗？

这是我的代码：http://jsfiddle.net/m38Gw/

Answer 1

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

这解决了我的问题。感谢

Answer 2

正在进行什么

许多移动浏览器会提供有关其窗口宽度的虚假信息。这开始于iPhone，因为与传统的计算机显示器相比，像素密度非常高。

为了给出更新的例子，Galaxy S4的屏幕分辨率为1920x1080像素。这与我的27英寸显示器完全相同。媒体查询，没有移动浏览器的分辨率欺骗，在这里完全没用，因为真实像素没有区别。

为了解决这个问题，我们有viewport。这是移动设备的“假”分辨率，通常远小于真实分辨率。通过视口，我们可以保留媒体查询的使用。

正如tv4free所说，我们有一个工具来控制视口，以meta元素的形式。然而，他的代码的一个潜在问题是maximum-scale。这将修复视口，不允许任何缩放。就个人而言，我认为这不是一个问题，因为您的媒体查询设计得当。然而，许多人认为这是一个坏主意。如果您遗漏maximum-scale=1.0; user-scalable=0;，则每次都会正确加载页面，但允许用户放大和缩小。

代码

设置分辨率，允许缩放：

<meta name="viewport" content="width=device-width; initial-scale=1.0;">

设置分辨率，不允许缩放：

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"

媒体查询，手机上的浏览器宽度问题

2 个答案:

正在进行什么

代码

更多信息：