html移动端最小字体大小,踩坑之移动端显示字体大小问题

踩到的第一个坑：

最近做一个移动端的h5，一开始拿到设计稿后，发现有几个区域字体换算之后在iphone6上是小于12px的，就有一个问题了，谷歌对小于12px的字体，是不做处理的。按理说，设计上应该要避免类似情况，之前做了很多的页面，还没有小字号的存在，所以准备自己先找找解决办法，不行的话，再沟通一下。

查找发现网上基本都是需要使用· transform:scale()来解决，并配合 transform-origin:top center.但是此类方法在缩小字体的同时，容器也会被缩小(例如div宽为200px，想要显示字号为8px,假如当前字体大小为16px，则需要缩放0.5，缩放完后发现div宽也缩小了，变成100px，但是我们不想要这样的效果，所以用此方法时，当scale值为x时，需要先将容器大小先缩放1/x，然后再使用transform:scale(x))，这样的做法比较繁琐，如果页面内容不多，可以使用。

如果内容是固定的，也可以使用图片来加载。

踩到的第二个坑：

web使用手机模拟器显示的字号和在手机上打开的不一致。本来高高兴兴的在模拟器上显示完美，但是一用手机打开，字号变的很大[同样的字号有的地方可以正确显示，有的却不能]。这下有点头大了，之前没遇到过。

(内心：觉得不可思议... 有点过分....)

有的说这是Chromium内核提高移动端文本可读性的一个特性，叫做这个特性被称做「Text Autosizer」，又称「Font Boosting」、「Font Inflation」。当文本数量太多，计算机认为在屏幕上显示这么多文本会导致用户不能清晰阅读时，他会自动设置font-size的大小，这个时候得到不同的字体大小的效果，

[移动端浏览器这样做真的好吗？？？]

解决办法：

给*设置 -webkit-text-size-adjust: none;

这个方法对我的问题有效果

html移动端最小字体大小,踩坑之移动端显示字体大小问题相关推荐

html5 移动端字体问题,踩坑之移动端显示字体大小问题
踩到的第一个坑: 最近做一个移动端的h5,一开始拿到设计稿后,发现有几个区域字体换算之后在iphone6上是小于12px的,就有一个问题了,谷歌对小于12px的字体,是不做处理的.按理说,设计上应该要 ...
android 字体文件压缩,Android 字体使用踩坑指南
Android 字体使用踩坑指南最近项目改版,根据ui的设计,需要使用到三字体.在使用过程中遇到一些坑,于是有了这个避坑指南! 字体压缩第一个坑!字体库的体积太大. 字体压缩的前提是要使用的内容是 ...
React-Native 踩坑------MIUI12“Text“组件显示异常
React-Native 踩坑------MIUI12"Text"组件显示异常我尽量不打错别字,用词准确,不造成阅读障碍最近发现React-Native的应用在MIUI12上 ...
字体在其他浏览器正常在IE8显示字体模糊问题解决
字体在其他浏览器正常在IE8显示字体模糊问题解决在开发一个控件的时候,发现在其他的浏览器比如Firefox,Chrome字体显示的很清晰,很漂亮.结果使用IE8显示的时候发现字体很模糊.更加奇怪的是 ...
【Unity】对Unity引用三方字体的踩坑日志
一.Unity导入三方字体导入字体文件要在项目中添加字体,必须将字体文件放在 Assets 文件夹中.然后,Unity 会自动将其导入.支持的字体格式为 TrueType 字体(.ttf 文件)和 ...
移动端触摸相关事件踩坑（touchmove默认事件以及passive）
移动端移动事件监听(touch.默认行为) 最近在写一个移动端网页中会遇到滑动事件监测问题,来解决用户在canvas画布中移动效果 touchmove.默认触发事件e.preventDefault() ...
阿里IOT用AMQP在服务端订阅消息，踩坑
之前一直按官方文档来的,但是topic消息一直积压,服务端老是订阅不到. 坑: String iotInstanceId = "${iotInstanceId}"; 这个参数是要 ...
vuecli4+vant移动端响应式项目踩坑记录
文章目录关键词参考链接一. 使用vue/cli4 二. 使用vant 三. 加入响应式布局 1. rem适配插件 2. PostCSS配置四. 图标库:封装svg图标组件 1. 建立如下目录结 ...
vue ssr 服务端跳转刷新踩坑
解决方法: 使用 a 标签href属性跳转能刷新当前页面的信息问题描述: 在ssr渲染期间,普通的this.$router.push的路由跳转不能刷新服务端的数据请求,服务端的数据跳转丢失出现原因 ...

html移动端最小字体大小,踩坑之移动端显示字体大小问题

html移动端最小字体大小,踩坑之移动端显示字体大小问题相关推荐

最新文章

热门文章