germxu / web-manual Goto Github PK

功能描述

webkit给移动端浏览器提供的一个特性的Text Autosizer特性，也叫做Font Boosting-字体提升、Font Inflation-字体膨胀。

作用

在手机上浏览网页时，很可能因为原始页面宽度较大，在手机屏幕上缩小后就看不清其中的文字了。而 Font Boosting 特性在这时会自动将其中的文字变大，可以让用户方便阅读页面中的文本。

触发条件

• 在默认视口980的情况下，页面会在屏幕中缩小显示，并且文本比较多的情况下，会触发Text Autosizer;
• 设置页面在视口中显示时缩小显示，并且文本比较多的情况下，会触发Text Autosizer;
• 如果有以上情况，但是文本的量不都多，也是不会触发此问题的，请知晓；

问题解决方案

• 在发生此问题的标签上设置高度;
• 在发生此问题的标签上设置max-height

引文
引文
谷歌浏览器的font boosting[Text Autosizer]

苏宁

{
    sysTime2: "2021-03-29 21:38:26",
    sysTime1: "20210329213826"
}

淘宝

{
  api: "mtop.common.getTimestamp",
  v: "*",
  ret: ["SUCCESS::接口调用成功"],
  data: {
    t: "1617023122019",
  },
}

授时中心

1617025697767 //返回时间戳

在Mac上程序最小化有个效果, 中文翻译叫 神奇效果, 是一个窗口通过向一个角压缩变形, 直至最小化到dock, 通过CSS 3 目前是没有可能制作扭曲的曲线边缘, 只能通过canvas或者svg容器来扭曲变形, Next term ---> magic download

在安卓手机特别是近年来的OLED屏幕上, 1像素不仅没有解决, 反而问题越发严重
目前已发现问题为安卓微信浏览器或者华为Mate 40 pro 自带浏览器的 <1px 线条渲染不显示问题

transform的元素产生新的viewport, 重置了后代节点的定位基准, 包括fixed定位, overflow, z-index层级提升, 等等

参考文献

http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/
https://www.w3.org/TR/2019/CR-css-transforms-1-20190214/#local-coordinate-system
https://www.w3.org/TR/2019/CR-css-transforms-1-20190214/#transform-rendering
https://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/