Question

我刚刚推出了我的网站http://www.connorgraham.com.au，并且我遇到了移动查看问题。在发布之前，一切都在工作并且看起来很完美，但我刚刚意识到在移动设备上，您可以向右滚动以显示覆盖20％左右的iPhone屏幕的白色条。网站应该是全宽的，你不应该向右滚动。我相信存在某种视口问题，但我不确定。

如果有任何帮助，我将不胜感激，如果有助于解决问题，我很乐意提供我的任何代码。

Answer 1

我希望你能访问css文件。您需要使用媒体查询更改顶部徽标和底部徽标宽度。现在有一个媒体查询顶部徽标设置为900px。这需要改变：

@media (max-width: 399px) {

   .mobile-logo {
   width: 200px;
   float: left;
   }

   .footer img {
  width: 150px;
  }
} 

@media (min-width: 400px) and (max-width: 900px) {
   .mobile-logo {
   width: 300px;
   float: left;
   }
}

编辑：我将媒体查询更改为399px

编辑：我在小查询中将标题徽标宽50px（现在是200px而不是150px）

另外，我会将元视图端口更改为：

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

根据我的经验，防止缩放是一个坏主意。这将初始比例设置为1，如果人们想要捏合和缩放，他们可以。这是理想的，因为您并不总是知道用户喜欢什么，或者他们是否有健康状况/残疾。

Answer 2

我认为这就是你所需要的：

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

这应该禁用缩放并防止出现问题（至少我认为问题是这样）。

编辑：

正如Charlie指出的那样，完全禁用缩放存在风险，更好的选择是将其设置为特定的最大值，这样用户仍然可以缩放一些。这对于可能尝试查看您网站的残障人士尤为重要。

网站移动问题 - 视口

2 个答案: