iPhone在打开时放大页面

Question

我一直在研究我的第一个响应式设计，在iPhone上查看时遇到了一些麻烦。当我在iPhone上打开一个页面时，它向左侧略微放大 - 恰好足以错过最右边的文本。

您可以找到网站here。 viewport-meta标记如下所示：

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

在我的电脑和iPad上看起来很好。任何和所有的帮助表示赞赏。

Answer 1

尝试使用此视口，它在我的网站上运行良好：

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

Answer 2

查看您是否在CSS中的任何地方使用100vh。如果您使用的是100vh，它会将菜单栏和底部工具栏视为100vh的一部分。参见https://chanind.github.io/javascript/2019/09/28/avoid-100vh-on-mobile-web.html

Answer 3

找到它。我已将width:100%;和padding:0 10px;放在@media only screen and (max-width: 600px)下的.wrapper元素上。将其更改为width:96%和padding: 0 2%;，它就像一个魅力。

感谢您的帮助！

Answer 4

尝试将width:100%; overflow:hidden;添加到body和html元素。如果您的页面加载方式不同，那肯定是一个CSS问题。