CSS的zoom属性使用以及其他浏览器不兼容问题

客官°小女子只卖身不卖艺 2021-09-25 05:24 1127阅读 0赞

在开发过程中,由于整个页面设计完后效果偏大,于是百度了找到了CSS的相关属性

*  zoom属性
 *  transform:scale()

这两个都可以使得整个页面进行缩小

但是使用transform:scale()的效果是这样的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5ODcxNQ_size_16_color_FFFFFF_t_70]

一缩小旁边就留白了.效果不佳

于是更换了zoom  
在谷歌完美解决问题,但是交付给客户的时候,客户使用了360就出问题了,360的兼容模式识别不了zoom属性,极速模式识别了zoom属性但是页面整体往左边移动,我设置了0.8,于是右边留白0.2也就是20%.  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5ODcxNQ_size_16_color_FFFFFF_t_70 1]

最终解决办法;给zoom样式加了个判断浏览器,是谷歌就生效,不是就不生效.  
然后也给火狐适配了一下.  
将中间的框用个div包起来 然后将中间使用transform:scale()进行缩小,缩小到原来的0.8,然后左右距离边边各10%.  
代码如下:

@media screen and (-webkit-min-device-pixel-ratio:0) {
       body{
    	transform:scale(0.8);
    	
    	}
    }
    
    @-moz-document  url-prefix()  {
       .test111{
    	transform:scale(0.8);
    	transform-origin:top left;
    	margin-left:10%;
    	width:100%;
    	
    }
    }

最后吐槽一句…  
这对我一个后端开发实属是个坑…

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5ODcxNQ_size_16_color_FFFFFF_t_70]: /images/20210923/e57eee2189ce4982a73fdf272e72e638.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5ODcxNQ_size_16_color_FFFFFF_t_70 1]: /images/20210923/5adadc80ce81403d9addfdb37ba6e901.png