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

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

• zoom属性
• transform:scale()

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

但是使用transform:scale()的效果是这样的

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

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

最终解决办法;给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%;
	
}
}

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