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

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

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

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

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

阅读 6.8k
评论 2017-04-01 提问
    7 个回答

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

    评论 赞赏 2017-04-11

      之前的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不要同时使用,因为缩放效果会叠加

      评论 赞赏 2017-04-07
        u3u
        • 5.4k
        html {
          zoom: .75
        }
        评论 赞赏 2017-04-01

          html{ transform:scale(.75) }

          评论 赞赏 2017-04-01
            昆蟲仔其實還好
            • 2
            • 新人请关照

            把页面拆开,分别缩放。

            评论 赞赏 2017-04-01
              hyule
              • 1.3k

              media-query + 使用 rem。

              评论 赞赏 2017-04-07
                html{ 
                    transform:scale(.75) 
                    }
                评论 赞赏 2017-04-11
                  撰写回答

                  登录后参与交流、获取后续更新提醒