css – 更改方向时,字体变为粗体

我在html中使用这个

<Meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;">

这在CSS中：

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }\

也试过这个：

html { -webkit-text-size-adjust: none; }

但由于某种原因,这种情况发生：

更新：我尝试删除所有的样式,看看我的任何CSS是否导致这一点,结果是奇怪的：当我没有使用任何字体规则时,字体变得更大(由于缩放被锁定,它不会放大通过HTML视口属性),也只有小字体变大,标题保持不变.奇怪@#$％

更新2：我用html / css播放并得出这个结论 – 文本放大不会发生的唯一时间是当文本包含在页面中唯一的元素中时 – 例如,如果我的所有内容都是p / span / div与文本,它不会被放大.如果我在其中添加另一个元素,页面上的所有文本将以横向模式放大.
我尝试做一些研究,并且通过许多手机网站查看,结果是一样的 – 他们都有这个效果.

解决方法

更多信息比真实解决方案

根据我对根据this page和this page的工作原理的理解,所有文本将以-webkit-text-size-adjust：auto(iOS的默认值)或-webkit-text的设置,以横向模式重构尺寸调整：100％.

我不相信100％的设置正在做你可能认为它正在做的事情(试图保持文本大小一样).相反,它只影响“如何应用文本膨胀算法”(根据this page).我无法准确地跟踪到什么意思;也就是说,对于通货膨胀算法,100％意味着什么.我的猜测是,基于this page’s报价…

The first time a webpage is rendered,Safari on iOS gets the width of
the block and determines an appropriate text scale so that the text is
legible.

…因为程序只是“首次呈现网页”,一旦设备从纵向转向横向,通货膨胀算法将会根据屏幕的宽度变化“扩展”文本,即使是设置为100％.

也许这是因为100％是关于纵向与横向的宽度差异.例如,this iPhone spec是960 x 640.这可能是100％意味着通货膨胀与960 x 640(比如说960/640 x 100％)有直接的关系,这个比例是1.5,这就造成了“大胆” “景观文字.如果是这种情况,那么理论上,-webkit-text-size-adjust可能需要设置为66.67％,以保持不受影响(将1.5因子返回到1).但我不相信它是如此的直截了当.

最终,我认为Andrey Bukati的答案是-webkit-text-size-adjust：none;是唯一的保证,不会发生文本大小调整的变化.但它可能会有其他的,也许是不可取的影响.

原文地址：https://www.jb51.cc/css/216347.html