问桌面等同于iOS Safari缩放页面到视窗宽度？
EN

Stack Overflow用户

提问于 2015-12-09 06:32:43

回答 1查看 54关注 0票数 0

是否有一个CSS技巧可以模仿iOS Safari在桌面浏览器中将页面的整个内容缩放到视窗宽度的方式？这是一个原型，所以它不需要是做某事的“适当”方式，只需要在一个浏览器(最好是Chrome或Safari)中工作。

基本上，我想编写一种大小(准确地说是1920px x 1080px )的代码，然后让所有内容都缩放到浏览器的宽度(如果它小于或大于该宽度)，而不必指定所有尺寸的百分比。有没有什么我可以用3d变换或者将整个页面设置为画布的方法(我对这两者都不太了解，不知道这是不是一个愚蠢的问题……)？

发布于 2015-12-09 08:03:24

如果我没理解错你的问题，这可能就是你要找的：

<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将具有不同的宽度。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/34167350

复制

相似问题

问桌面等同于iOS Safari缩放页面到视窗宽度？EN