为移动网站设置不同的 height/width

Question

我刚刚创建了我的投资组合，并希望在移动设备上查看我的网站时，全屏移动网站覆盖显示说 'coming soon' 等。

我已经用媒体查询试过了；然而，出于某种原因，身高被忽略了。如果您访问该网站并检查元素，您可以看到该网站仍然是 300vw x 300vh。

html body {
  margin: 0;
  padding: 0;
  font-family: 'Karla', sans-serif;
  overflow-x: hidden;
  overflow-y: hidden;
  height: 300vh;
  width: 300vw;
  background-color: #FFFFFF;
}

@media screen and (max-width: 768px) {
  body {
    height: 100vh;
    width: 100vw;
  }

  html {
    height: 100vh;
    width: 100vw;
  }
}

如果有人想调查这个问题，我的网站是“https://nathan.work”。

也许有某种方式可以让用户在移动设备上加载时转到完全不同的 .html 文件？我不确定何时涉及移动响应。

Answer 1

特别是对于您的网站，您可以添加 position:fixed 这样用户无论滚动到哪里，叠加层都会跟随。

@media screen and (max-width: 768px) {
  html {
    height: 100vh;
    width: 100vw;
    position: fixed;
  }
}

为移动网站设置不同的 height/width

Setting a different height/width for a mobile site

html

css

mobile

height

media-queries