宽度= 100％CSS属性不适用于移动设备。好像视口的宽度错误

Question

我最近启动了这个网站。在移动视图中，标题不会覆盖整个屏幕宽度，而是在右侧留有空白。我找不到能使其同时在台式机和移动设备上运行的解决方案。

这是视口设置

env_file

URL为camisite.now.sh

这是我的CSS，对象只是一个没有类的标头。 我尝试更改为100vw，但大致相同。我认为viewport-width可能设置了错误的宽度。

    <meta name="viewport" content="width=device-width, initial-scale=1">

Answer 1

我现在看到您的问题。这是因为.post-form的制作方式。在移动模式下，表单延伸到视口之外。您有两种解决方案
1.更改.post-form
的行为 2.调整header
的宽度 对于选项1，在mains的styles.css：75中，规则为

main {
    margin: auto;
    width: 500px;
    overflow: auto;
    padding: 3rem 2rem;
}

500px引起了您的问题，您可以摆脱它。如果您的手机宽度小于500px，则main会“溢出”您的视口，而header不会这样做。其宽度保持在视口宽度的100％。
对于选项2，您可以创建CSS规则，以在屏幕小于500px时将宽度设置为500px

@media only screen and (max-width: 500) {
  header {
    min-width: 500px;
  }
}