每當(dāng)我用HTML & ampCSS，我發(fā)現(xiàn)網(wǎng)站獲得了一個水平滾動。用Chrome DevTools檢查時，我從來沒有發(fā)現(xiàn)是什么導(dǎo)致了這個問題。所有的元素總是在頁面內(nèi)，沒有一個元素生成超出頁面的框。即使屏幕上沒有任何元素，也會有水平滾動；這種效果在手機屏幕上尤其持久。我也許可以讓卷軸像筆記本電腦一樣消失在大屏幕上
body {
width: 95vw;
}和/或
body {
overflow-x: hidden;
}但它從未在手機上消失。其結(jié)果是，在我創(chuàng)建的任何網(wǎng)站上，都會出現(xiàn)一個輕微的、惱人的左右移動，如下所示:
虛擬機構(gòu)的登錄頁面(前端導(dǎo)師項目) 功能部分組件(前端導(dǎo)師項目) 訂單匯總組件(前端導(dǎo)師項目) 我的愛好網(wǎng)站 幾乎所有我建過的有移動設(shè)計的響應(yīng)網(wǎng)站都是如此。
我在互聯(lián)網(wǎng)上尋找解決方案，我得到了類似“使用框大小:邊框”這樣的東西、“移除任何溢出的元素/調(diào)整其大小”等。我還想出了我上面提到的涉及寬度的修復(fù):95vw對于body元素。我也在這個平臺上搜索答案，遇到了一些，像這樣的，這讓我想知道回答者是否曾經(jīng)在他們自己的代碼中遇到過這個問題。這些解決方案實際上都不起作用，我很好奇其他人是如何在他們的網(wǎng)站上沒有這種煩人的水平滾動條的。
以下是重現(xiàn)該問題的方法。
<body>
<main>
stuff
</main>
<footer>
feet
</footer>
</body>/* General Styles */
@media screen
and (min-width: 300px)
and (orientation: portrait), (orientation: landscape) {
body {
background-color: hsl(0, 0%, 86%);
color: hsl(0, 0%, 8%);
font-family: 'Poppins', sans-serif;
width: 100vw;
margin: auto;
padding: 0;
border: 0;
box-sizing: border-box;
overflow-x: hidden;
}
}創(chuàng)建后，在手機尺寸上查看Chrome DevTools上的網(wǎng)站，無論是iPhone還是其他類型的手機。點擊并按住站點，然后拖動它。
真的希望能永久解決這個問題
用這個，它會把身體多余的東西清除掉:
width: 100vw !important;
overflow-x: clip !important;不要使用overflow-x: hidden，因為它仍然不能阻止孩子走出邊界。我試著在你的網(wǎng)站上應(yīng)用上面的代碼，它工作了。