网站移动问题 - Viewport

Question

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

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

Answer 1

我想这就是你需要的：

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

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

编辑：

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

Answer 2

我希望您可以访问 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

编辑：我在小查询中将页眉徽标加宽了 50 像素（现在是 200 像素而不是 150 像素）

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

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

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

网站移动问题 - Viewport

Website Mobile Issue - Viewport

html

css

mobile

viewport