Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

高清方案下,页面字体会不受控制变的很大 #732

Closed
minooo opened this issue Jan 16, 2017 · 7 comments
Closed

高清方案下,页面字体会不受控制变的很大 #732

minooo opened this issue Jan 16, 2017 · 7 comments

Comments

@minooo
Copy link
Contributor

minooo commented Jan 16, 2017

高清方案在手机微信上的一个奇葩问题,当字数变多,会莫名其妙的变大,直接上gif
11111

@silentcloud
Copy link
Contributor

开发者工具也只是辅助调试性工具,最好在真机里测试。
你先在真机里试试会不会出现这种情况 @minooo

@silentcloud
Copy link
Contributor

@minooo 我在真机 (ip6+)测试没问题,手上没 android 机,你拿这个地址试试 android

http://s.codepen.io/boomerang/948392cb8f25e8298c509ed78b4a71a71484553349284/index.html

@minooo
Copy link
Contributor Author

minooo commented Jan 19, 2017

问题已解决。

问题原因:
在X5新内核Blink中,在排版页面的时候,会主动对字体进行放大,会检测页面中的主字体,当某一块字体在
我们的判定规则中,认为字号较小,并且是页面中的主要字体,就会采取主动放大的操作。然而这不是我们想要的,可以采取给最大高度解决

解决方案:

*, *:before, *:after { max-height: 100000px }

后续:经过项目实践,还是决定给 max-height 一个具体数值比较好,之前给的是 100% ,但有自身的局限性,比如 antd 的轮播组件在 max-height:100% 的情况下就不能正常显示。

补充:有同学反映,在一些情况下 textarea 标签内的字体大小即便加上上面的方案,字体也会变大,无法控制。此时你需要给 textareadisplay 设为 table 或者 inline-table 即可恢复正常。(感谢 程序媛喵喵 对此的补充)

@minooo minooo closed this as completed Jan 19, 2017
@afc163
Copy link
Member

afc163 commented Jan 19, 2017

腾讯莫名其妙的规则。

@minooo minooo changed the title 高清方案在微信上的一个特别奇葩的问题。 高清方案在微信上字体莫名变大 Apr 6, 2017
@minooo minooo changed the title 高清方案在微信上字体莫名变大 高清方案在微信上,有时候字体会不受控制变的很大 Apr 6, 2017
@lqzhgood
Copy link

Chrome 61.0.3113.0(正式版本)canary (64 位) 在做 Sticky Footer 的时候也遇到了.
指定 0.24rem 字体大小,但是去 computed 里面看 却是 36px;
指定 #main -> max-height:10000000px 解决。

@czy0729
Copy link

czy0729 commented Jun 5, 2017

UC字体莫名放大的问题终于解决了,感谢@minooo

@minooo minooo changed the title 高清方案在微信上,有时候字体会不受控制变的很大 高清方案下,页面字体会不受控制变的很大 Jun 19, 2017
@xifu
Copy link

xifu commented Jul 7, 2017

也遇到过这个问题,当时发现的问题是,单行文字设置高度和行高后正常,多行文本不限定高度,会出现文字放大效果,我的粗暴决方法是:height:0; display:table;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants