某些（移动）设备上出现奇怪的白条

Question

我无法摆脱屏幕右侧的白色栏。它仅在某些（移动）设备上显示，而与浏览器无关-但是，如果将屏幕翻转为横向模式，它将不再显示。

我不知道这是怎么回事，我检查了所有物品的尺寸，但似乎没有什么不合适的地方。任何帮助将不胜感激！

网站：http://carlociarnelli.eu/

空白屏幕截图：https://imgur.com/a/LXABvoQ

Answer 1

一个小难题！首先，让我告诉您如何成为自己想要成为一名开发人员的难题，请查看您的站点！如果您使用的是Chrome，请转到F12开发人员工具，切换设备工具栏，然后选择iPhone和/或其他工具。您确实会看到邪恶的白色酒吧。在Firefox中，可以使用类似的工作流程，但它称为响应式设计模式，其按钮位于右侧（按F12键之后）。

艺术品正在检查哪些元素大于页面。与检查员一起检查元素，以查看导致溢出的原因，例如首先，您可能会找到<h1>Hi,</h1>和<h3>I am Carlo</h3>元素，但是首先要在层次结构中进行更高的检查。然后，您会发现它们都在名为hero-content-area的类中：

请注意该类的宽度为400像素，而Galaxy S5的宽度仅为360像素！由于页面的宽度为100％，即360px，因此该元素为您提供40px的空白。解决方案：给 .hero-content-area 一个width: 100%，您将已经注意白色条消失了！现在丢掉left: 50%和margin-left: 200px;，您会发现它们再次很好地居中！ ✔️

处理这些问题的另一种方法是在viewport meta tag中指定位于您头部的最小宽度。当前是<meta name="viewport" content="width=device-width, initial-scale=1.0">。如您所知，设备宽度可以低至375px或360px，而您的类为400px。解决方案：<meta name="viewport" content="width=400, initial-scale=1.0">。这也可以解决您的白条问题！ ✅

我希望您不介意我深入/概括，但是至少您有答案。 ：）