网站的移动版本在启动时放大

Question

当我的网站(www.missnisaa.com(在移动设备上启动时，页面会放大。用户需要捏合才能获得正确的比例。如何在发布时获得正确的规模？

我尝试将初始比例、最大比例和最小比例更改为各种数字，但无济于事

这是当前代码：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="HandheldFriendly" content="true">

我也尝试过更改 css。当前代码：

/*------------------------------------------------------------------------------------------------------*/
/*Mobile*/
/*------------------------------------------------------------------------------------------------------*/
/* Portrait and Landscape */
@media only screen
  and (max-width: 768px)
  and (-webkit-min-device-pixel-ratio: 1) {
html {
 -ms-text-size-adjust: none;
 -webkit-text-size-adjust: none !important;
}

无论移动浏览器如何，页面始终会放大。我只在iOS上测试过，因为我没有安卓手机可以测试。

Answer 1

您在

CSS 规则中width: 768px !important;了body(在低于 768px 的媒体查询中(。因此，您的内容对于智能手机来说总是太宽，这就是为什么您的iPhone显然会缩放太宽的机身以使其适合屏幕的原因。只需删除它 - 默认auto宽度为 100%，这是响应式网站所需要的。

Answer 2

我删除了那行，除了在 safari 上没有任何变化，横幅图像和文本现在被压在左侧。

我也试过

width: 100% !important;

但这也行不通。