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上进行过测试，因为我没有要测试的Android手机。

Answer 1

您在width: 768px !important;的CSS规则中有body（在768px以下的媒体查询中）。因此，对于智能手机，您的内容将始终太宽，这就是为什么iPhone显然会缩放过宽的主体以使其适合屏幕的原因。只需删除它-默认auto的宽度为100％，这就是响应型网站所需的宽度。

Answer 2

我删除了这一行，除了野生动物园外，一切都没有改变，横幅图像和文本现在被压缩到左侧。

我也尝试过

width: 100% !important;

但这也不起作用。

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

2 个答案: