84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
css样式如下: body { zoom: 50%; }
发现对 图片等都变为原大小的一半,但是字体还是设置的大小(比如font-size:30px)。什么原因?
ringa_lee
测试了下,说下我的测试结果:
我手头暂时有iPhone4、5、6p(均为ios7+),经测试全部支持zoom,Android仅有一台魅族MX2。
1.设置了<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
在ios端,对元素应用zoom属性,可以正常缩放。 在Android端,文字大小不会变化。 pc端,chrome正常缩放。
如果设置了body{-webkit-text-size-adjust:none;} (这个属性仅ios7+以上支持),有个有趣现象 如果是对于body应用zoom,ios端文字大小不会变化;如果是对于普通元素应用zoom,则文字正常缩放。
2.没设置viewport 均可正常缩放。
结论: 这个属性在webkit内核浏览器中仅是实验性支持,不同浏览器表现不一致。题主不妨换用transform: scale()
以上。
原答案:
zoom是IE的私有属性,你在什么应用场景下,怎么会有这个需求?
测试了下,说下我的测试结果:
我手头暂时有iPhone4、5、6p(均为ios7+),经测试全部支持zoom,Android仅有一台魅族MX2。
1.设置了
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
在ios端,对元素应用zoom属性,可以正常缩放。
在Android端,文字大小不会变化。
pc端,chrome正常缩放。
如果设置了body{-webkit-text-size-adjust:none;} (这个属性仅ios7+以上支持),有个有趣现象
如果是对于body应用zoom,ios端文字大小不会变化;如果是对于普通元素应用zoom,则文字正常缩放。
2.没设置viewport
均可正常缩放。
结论:
这个属性在webkit内核浏览器中仅是实验性支持,不同浏览器表现不一致。题主不妨换用transform: scale()
以上。
原答案:
zoom是IE的私有属性,你在什么应用场景下,怎么会有这个需求?