相当于iOS Safari的桌面按视口宽度缩放页面

Question

是否有CSS技巧可以模仿iOS Safari在桌面浏览器中将页面的整个内容缩放到视口的宽度？这是一个原型，所以它不需要是"正确"的做事方式，只需要在一个浏览器中工作（最好是Chrome或Safari）。

基本上，我想以一个大小（确切地说是1920px x 1080px）编码一些东西，然后让所有东西都按浏览器的宽度缩放，如果它小于或大于浏览器的宽度，而不必以百分比指定我的所有尺寸。我能用3d转换或将整个页面设置为画布做些什么吗？（我对这两者都不太了解，不知道这是不是一个愚蠢的问题…）？

Answer 1

如果我正确理解你的问题，这可能就是你想要的：

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

此标记将强制浏览器为页面提供与屏幕/视口大小相同的宽度。需要注意的是，这只适用于以响应方式构建的页面。如果你对所有东西都使用固定的像素值（听起来可能是这样吗？），这可能不会很好地工作。

另一种选择是：可以使用相对单位（而不是百分比）调整所有内容的大小，例如em或rem，然后按特定视口宽度缩小整个font-size。像这样：

html {
  font-size: 65%;
}
@media screen and (min-width: 800px) {
  html {
    font-size: 100%;
  }
}
.my-element {
  width: 2rem;
}

在这种情况下，my-element在不同的视口大小下将具有不同的宽度。