`zoom` CSS 属性和 safari 中的字体大小

Question

我的网站在桌面上的响应速度还不错，但是当涉及到 iPad 或平板电脑大小的设备时，就很糟糕了。这并不是来自布局，这还可以，但一切都太大了，使得网站难以浏览。我认为知道我的网站是一个网络应用程序可能很有用，其中的页面无需滚动，我的意思是所有内容都适合视口。

我想在较小的设备上缩小页面，因为缩小到 75% 看起来相当不错。

测试1

我已经尝试在

zoom

元素上设置

:root

CSS 属性：

:root {
    zoom: .8;
}

实际上它在 chromium 浏览器上工作得很好，但在 Safari 上，除了

font-size

没有减少之外，一切都很好。顺便说一句，Firefox 不支持它（如果没有其他解决方案，这对我来说并不重要）。我想知道是否有一种方法可以更好地支持 safari 上的缩放，甚至是一种完全不同的方式来缩小页面

谢谢

Answer 1

如果您的问题主要是文本大小，您可以通过将大小更改为相对单位来完成很多操作。因此，您可以使用 25vw 代替字体 25px，它的大小基于视口的宽度。这种方法可能会遇到一些问题，即在不同的屏幕尺寸上字体太小或太大，因此最佳实践是根据屏幕尺寸使用媒体查询。

这是一个例子：

@media screen and (max-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

当屏幕尺寸低于 480 像素宽时，这会将背景更改为浅绿色。通过使用媒体查询，您可以为每种屏幕尺寸编写 CSS。

希望这有帮助。