浏览器默认改变字体大小解决方案
前言
遇到个小坑,踩了一个多小时,真鸡儿难受。
是这样的,在移动端字体大小设置了16px,结果到 iphone5 上显示的有大有小,很奇怪。开始的时候还以为是P标签的原因,查了半天文档...最后才发现是浏览器的默认行为。
正文
在CSS中有 text-size-adjust 这样一个属性,这个属性允许我们控制将文本溢出算法应用到一些手机设备上。这个属性还没有写进标准,使用时必须加上前缀。如下:
-webkit-text-size-adjust: ; text-size-adjust: ; -moz-text-size-adjust: ;
因为缩放适配小屏幕而导致文字会变得很小,许多手机浏览器会使用文本溢出算法让文本变大而更易读。当一个包含文本的元素宽度用了100%,他的文本大小会增加直到达到一个易读的大小,但是不会修改布局。 text-size-adjust 这个属性允许开发者去除或者修改这个浏览器默认行为,因为当网页设计已经处理小屏幕的宽度问题时不需要他。
语法如下:
/* 文本不会放大 */ text-size-adjust: none;/* 文本可能会被放大 */ text-size-adjust: auto;/* 文本会被放大80% */ text-size-adjust: 80%;/* 全局的值 */ text-size-adjust: inherit; text-size-adjust: initial; text-size-adjust: unset;
text-size-adjust 属性的值为 auto , none , 百分比。
- none
禁用浏览器的文本溢出算法。在老的基于webkit内核的桌面端浏览器,这将阻止用户将网页放大或缩小。
- auto
启用 浏览器的文本溢出算法。该值用于取消先前使用CSS设置的none。
- <percentage>
启用 浏览器的文本溢出算法,具体用一个百分数来确定文本放大范围。
我的解决办法:
body { text-size-adjust: 100% !important; -webkit-text-size-adjust: 100% !important; -moz-text-size-adjust: 100% !important; } //必须加上对应的前缀
需要注意的是这个属性并未写进标准,使用时 必须添加上对应的前缀,然后 这个属性只有在一些智能手机和平板电脑上使用,当然,这种情况多出在小屏幕的手机上,桌面浏览器和一些平板电脑浏览器并没有一些溢出算法。
更详细的内容请参考 MDN 文档。
转载于:https://www.cnblogs.com/bfc0517/p/8358948.html
浏览器默认改变字体大小解决方案相关推荐
- 改变文字颜色html,html怎么改变字体大小和颜色
font-family:'Microsoft YaHei'. 小编的个性取决于小编是谁,小编的态度要看看你是谁. 网页字体样式华文黑体:STHeiti 网页字体样式华文楷体:STKaiti 好的饰品是 ...
- MathType使用技巧之 改变字体大小
MathType使用技巧之 改变字体大小 一.MathType中的公式字体 MathType中默认的字体大小为12pt,在word中即小四.word字体对应MathType的字体大小如下表所示. wo ...
- html字体字号颜色怎么设置,html字体样式大全 html怎么改变字体大小和颜色
网页字体样式华文黑体:STHeiti 网页字体样式华文楷体:STKaiti 网页字体样式华文宋体:STSong 网页字体样式华文仿宋:STFangsong 网页字体样式黑体:SimHei 网页字体样式 ...
- php的样式怎么设置字体大小,css中如何改变字体大小
在css中,可以使用font-size属性来改变字体大小,该属性可以设置字体大小,语法格式为"font-size:值;".实际上font-size属性设置的是字体中字符框的高度,实 ...
- html在360浏览器如何修改字体大小,360浏览器网页中字体大小如何修改
浏览器中的字体要如何修改呢?在打开浏览器的时候会发现网页的字体太小,阅读起来不是很方便,那么这时候就需要用户的帮助呢,这时候要如何操作呢,今天小编就跟大家分享一下如何将字体大小更改的几个方法,这样用户 ...
- 怎么调大计算机浏览器内字体,电脑浏览器怎么设置字体大小
电脑浏览器的字体是可以进行随意调整的,如果你赶紧字体不舒服可以设置下字体大小.下面由学习啦小编为大家整理了电脑浏览器怎么设置字体大小的方法,希望对大家有帮助! 电脑浏览器怎么设置字体大小 电脑浏览器设 ...
- Vivado2016如何改变字体大小
Vivado安装之后,默认字体总是很小,看起来很费眼睛.后来找到了改变字体大小的方式,如下图(以2016版本为例): 首先打开Tools,选择Options: 然后选择Text Editor中的Fon ...
- 移动端-动态改变字体大小
// 动态改变字体大小 function setRem() {var ui_w = 375;// 获取屏幕的宽度var clientWidth = document.documentElement.c ...
- MD改变字体大小,颜色,字体背景
MD改变字体颜色 字体颜色语法: <font color= "#颜色十六进制"> 内容</font> <br />其中 <br>和& ...
最新文章
- AI「复活」《延禧攻略》众生相
- linux系统安装显卡驱动卡顿,关于Ubuntu16.04上N卡驱动导致滚动屏幕卡顿问题
- 飞鸽_飞鸽2007_飞鸽传书_飞鸽传书2007
- 第二章--Mysql分区表
- Android移动端开发代码规范与格式化工具
- 所需依赖_包揽全球75%进口!中国为何进口天量铁矿石?如何减少对澳依赖
- python 局域网服务器_Python一秒搭建ftp服务器,帮助你在局域网共享文件
- 让ProgressPar动起来
- 拒绝搜索引擎抓取页面
- 华为日志服务器文档,华为日志服务器配置
- 资源宝分享wordpress主题后门检测清理技巧
- 网桥是怎么分类的?具体有哪些分类?
- 30、OAK摄像头使用官方的yolox进行初训练和测试
- maven常用scope作用域说明
- Sass函数:列表函数nth
- ​2022年云市场营收排行榜
- 地理信息系统概论——知识点总结
- SEO 优化 搜索引擎优化方式
- 基于S32K148快速调试TJA1101
- 如何关闭Apple Watch 上的激活锁?
热门文章
- python编程第5版_正版 Python学习手册(原书第5版) python编程从入门到精通 python入门 计算机网络...
- 怎么制作HTML5页面让它适应电脑和手机的尺寸?
- 从顺序表中删除具有最小值的元素(假设唯一)并由函数返回被删除元素的值。
- python:实现pdf文件加盖骑缝章
- Python实现经典网络架构Googlenet代码
- 使用阿里云服务器安装AList
- 三星手機android6.01,台版三星Galaxy Note 5 升级Android 6.0有哪些变化
- Python学习路线,
- java仿QQ截图 收藏
- ambari失去心跳同时无法连接其中一台datanode的错误