html - 较小屏幕尺寸的配置问题

Question

左边的图片是现在手机屏幕上的样子。右边的图片是我想要的样子，每行可以容纳更多的单词。我将 html 背景设为红色以突出显示它，将 body div 设为灰色。

Screenshot

为了获得该结果，我需要对代码进行哪些更改？我不确定为什么该页面在右侧包含该部分，但左侧看起来没问题。我想把那部分从屏幕上去掉。我不确定这段代码是否有帮助，但它是:(可能与 div.container 有关)

@media only screen and (max-width: 680px) {
        div.container {
        margin: 0 auto;
        width: auto !important;
    }

Answer 1

将这些添加到您的样式中:

html,body{
  margin: 0 !important;
  padding: 0 !important;
}

如果没有任何意义，则将此视口(viewport)添加到 html 中的 head 标记中:

<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no; target-densityDpi=device-dpi" />