javascript - 使用css中的zoom:50%后对页面文字大小不生效,什么原因?
ringa_lee
ringa_lee 2017-04-10 15:04:38
[JavaScript讨论组]

css样式如下:
body {
zoom: 50%;
}

发现对 图片等都变为原大小的一半,但是字体还是设置的大小(比如font-size:30px)。什么原因?

ringa_lee
ringa_lee

ringa_lee

全部回复(1)
高洛峰

测试了下,说下我的测试结果:

我手头暂时有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的私有属性,你在什么应用场景下,怎么会有这个需求?

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号