为移动站点设置不同的高度/宽度

Question

我刚刚创建了我的投资组合，并希望全屏移动网站叠加显示在移动设备上查看我的网站时说"即将来临"等。

我已经尝试了媒体查询；但是，由于某种原因，身体高度被忽略了。如果您访问网站并检查元素，则可以看到该站点仍然是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;
  }
}