前端怎么实现像chrome浏览器的百分比缩放同样的效果?

Question

因为网站设计时就不是针对1024分辨率的, 现在如果重做工作量巨大(和重做整个平台差不多了)

现在发现chrome 75% 缩放效果和期望效果几乎一样.

所以有没有什么方法可以实现这效果?

js或css的都可以, 浏览器只考虑chrome

Answer 1

最后用electron打包了一个客户端搞定了. electron 的 BrowserWindow.webPreferences.zoomFactor 属性和chrome的是一样的

Answer 2

之前的QQ公众号项目就有使用zoom/scale, 实现图片hover放大的效果.IE7/IE8使用zoom, 其他浏览器使用CSS3 transform scale值实现。
有个值得注意的是，我之前看到网上说，在文档流中zoom加在任意一个元素上都会引起一整个页面的重新渲染，而scale只是在当前的元素上重绘。这其实很好理解，对吧。scale呢变化时候，其原本的尺寸是不变的，因此，就没有layout的重计算；但是zoom牵一发动全身，就麻烦地多！
二者之间的差异：
1、zoom的缩放是相对于左上角的；而scale默认是居中缩放
2、zoom的缩放改变了元素占据的空间大小；而scale的缩放占据的原始尺寸不变，页面布局不会发生变化
3、zoom和scale对元素的渲染计算方法可能有差异（有可能会引起图片失真）
4、对文字的缩放规则不一致。zoom缩放依然受限于最小12像素中文大小限制；而scale就是纯粹的对图形进行比例控制

最后需要注意的是，zoom和transform scale不要同时使用，因为缩放效果会叠加

Answer 3

html {
  zoom: .75
}

Answer 4

html{ transform:scale(.75) }

Answer 5

把页面拆开，分别缩放。

Answer 6

media-query + 使用 rem。

Answer 7

html{ 
    transform:scale(.75) 
    }