屏幕尺寸较小的配置问题

Question

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

屏幕截图

为了获得该结果，我需要对代码进行哪些更改？ 我不确定为什么页面在右侧包含该部分，但左侧看起来还可以。 我想把那部分从屏幕上移开。 我不确定这段代码是否有帮助，但是在这里是：（也许与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;
}

如果没有任何意义，则将该视口添加到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" />