为什么我的移动网站向左滚动到很多空白区域答案

【问题标题】：Why does my mobile site scroll left to lots of white space为什么我的移动网站向左滚动到很多空白区域
【发布时间】：2015-03-02 03:44:31
【问题描述】：

我真的很难理解为什么我的网站的纵向移动版本会向左滚动！

我已经删除了相当大但宽度仍然滚动到屏幕右侧的标题图像！

我在我的 head 标签中应用了通用的视口代码，并使用了 css 宽度，但无济于事。

在我的网站的移动版本上不应向左或向右滚动。

关于是什么元素/@media 设置导致移动 css 出现此宽度问题的任何线索？

非常感谢！

【问题讨论】：

【解决方案1】：

快速浏览一下开发人员面板，您现在使用的是min-width:900px，无论width 标记设置为什么，它始终保持900px 的宽度。最简单的解决方法是执行以下操作：

#mediacontainer {
  min-width:100%;
  /* other css... */
}

这样，内容将始终是视口宽度的 100%。现在，另一种选择是在元素上设置一个max-width，以防止它溢出屏幕：

#mediacontainer {
  width:900px;
  max-width:100%;
  /* other css... */
}

此方法允许您指定 900 像素，但如果没有 900 可使用，则会阻止它以这种方式显示。

【讨论】：

我试过了，但它不起作用！ ''
你是在电脑上测试，还是在手机上测试？您的查询现在是@media only screen，这意味着计算机不会触发查询。将其更改为@media screen和将您的触发器更改为min-width 和max-width。它会起作用的。
好的，我又看了一遍 - min-width 仍在应用中。与其设置绝对像素值，不如使用百分比，因为它每次都会适当缩放。要么使用width而不是min-width，这样您就不必每次都重置。
谢谢布赖恩。我正在智能手机上进行测试。右侧仍有大量空白。我将 ' ' 更改为 initial-scale=0.2，这减少了整体宽度。你认为浏览器会处理这行代码两次并以某种方式“加倍”视口吗？
简答，不。初始比例与像素比率有关，因此降低该数字会缩小您的网站。我现在正在用更完整的代码和解释更新我的答案。