每當(dāng)我用HTML & ampCSS，我發(fā)現(xiàn)網(wǎng)站獲得了一個(gè)水平滾動(dòng)。用Chrome DevTools檢查時(shí)，我從來沒有發(fā)現(xiàn)是什么導(dǎo)致了這個(gè)問題。所有的元素總是在頁面內(nèi)，沒有一個(gè)元素生成超出頁面的框。即使屏幕上沒有任何元素，也會(huì)有水平滾動(dòng)；這種效果在手機(jī)屏幕上尤其持久。我也許可以讓卷軸像筆記本電腦一樣消失在大屏幕上
body {
width: 95vw;
}和/或
body {
overflow-x: hidden;
}但它從未在手機(jī)上消失。其結(jié)果是，在我創(chuàng)建的任何網(wǎng)站上，都會(huì)出現(xiàn)一個(gè)輕微的、惱人的左右移動(dòng)，如下所示:
虛擬機(jī)構(gòu)的登錄頁面(前端導(dǎo)師項(xiàng)目) 功能部分組件(前端導(dǎo)師項(xiàng)目) 訂單匯總組件(前端導(dǎo)師項(xiàng)目) 我的愛好網(wǎng)站 幾乎所有我建過的有移動(dòng)設(shè)計(jì)的響應(yīng)網(wǎng)站都是如此。
我在互聯(lián)網(wǎng)上尋找解決方案，我得到了類似“使用框大小:邊框”這樣的東西、“移除任何溢出的元素/調(diào)整其大小”等。我還想出了我上面提到的涉及寬度的修復(fù):95vw對(duì)于body元素。我也在這個(gè)平臺(tái)上搜索答案，遇到了一些，像這樣的，這讓我想知道回答者是否曾經(jīng)在他們自己的代碼中遇到過這個(gè)問題。這些解決方案實(shí)際上都不起作用，我很好奇其他人是如何在他們的網(wǎng)站上沒有這種煩人的水平滾動(dò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)建后，在手機(jī)尺寸上查看Chrome DevTools上的網(wǎng)站，無論是iPhone還是其他類型的手機(jī)。點(diǎn)擊并按住站點(diǎn)，然后拖動(dòng)它。
真的希望能永久解決這個(gè)問題
用這個(gè)，它會(huì)把身體多余的東西清除掉:
width: 100vw !important;
overflow-x: clip !important;不要使用overflow-x: hidden，因?yàn)樗匀徊荒茏柚购⒆幼叱鲞吔纭Ｎ以囍谀愕木W(wǎng)站上應(yīng)用上面的代碼，它工作了。