博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
text-size-adjust属性
阅读量:7048 次
发布时间:2019-06-28

本文共 1343 字,大约阅读时间需要 4 分钟。

    在慕课上无意中看到-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;这两段代码,居然发现自己完全不理解,然后就去问度娘了,以下是一些整理:

    有人说“html { text-size-adjust: 100%; }是解决 iPhone 横屏时默认会放大文字的问题,可是我试过,上面的css并不能解决,然后我发现 meta viewport 的initial-scale=1 倒是可以解决这个放大问题。<meta name="viewport" content="width=device-width,initial-scale=1"/>”,“iPhone 和 Android 的浏览器纵向 (Portrate mode) 和橫向 (Landscape mode) 模式皆有自动调整字体大小的功能。控制它的就是 CSS 中的 -webkit-text-size-adjust。text-size-adjust 设为 none 或者 100% 关闭字体大小自动调整功能。”这些理解都不算完整,结合下面的理解可能更为具体点。

    -webkit-text-size-adjust 的本职是用于mobile的,见规范  和 apple 的 。之所以现在的桌面版webkit浏览器支持他,是因为实际上这是一下bug。,这个bug在最新版的 WebKit Nightly Builds 里已经被修复了。这属性现在的一般用处是防止iPhone在坚屏转向横屏时放大文字(注意,就算viewport设置了maximum-scale=1.0 文字还是会放大的)。而且iPhone和iPad的默认设定是不一样的,iPhone默认设定 -webkit-text-size-adjust: auto;iPad默认设定 -webkit-text-size-adjust: none;所以iPad默认是不调节的。

    此属性还支持百分比,这在当前的桌面版的webkit浏览器是不支持的,所以如果不想让iPhone横坚屏切换的时候调节文字,用 -webkit-text-size-adjust: 100%; 绝对不能用 -webkit-text-size-adjust: none; 这会导致仍然支持 -webkit-text-size-adjust: none;的桌面版的webkit浏览器无法人为放大文字大小,严重影响可用性。

关于如何在chrome里实现小于12px的文字。

当然文字缩小到12px以下本来就一定程度影响到可用性了,建议无视chrome的这个特性。

硬要实现的话,我想到的一个变通方法是先用js判断是否为chrome (至今还没听说有区分safari 和 chrome 的 css hack )

var isChrome = !!window.chrome;

再用-webkit-transform: scale( ) 缩小到合适值。

    以上都是他人的理解,我也只是全部融合在一起,至于具体如何,还得慢慢研究试验,毕竟还没接触到手机端部分。

转载于:https://www.cnblogs.com/sup9278/p/4632924.html

你可能感兴趣的文章
HashMap的工作原理
查看>>
PHP判断中文字符
查看>>
新手编程入门二:使用“模板模式”减少重复代码
查看>>
hadoop 统计输入的行数的MAP
查看>>
ASP.NET Core 应用在Linux上如何运行
查看>>
springboot + @scheduled 多任务并发
查看>>
Linux安全:wheel用户组
查看>>
如何解决Greenplum中无法通过标准命令修复的元数据错误
查看>>
setContentType 的顺序 导致的乱码问题
查看>>
xcode不能智能提示问题
查看>>
Maven Dependencies - miss
查看>>
Mongo Collections
查看>>
Android MVVM开发——DataBinding基础
查看>>
php中file_get_content 和curl以及fopen
查看>>
基于 Pusher 驱动的 Laravel 事件广播(上)
查看>>
fuel部署openstack 打开fuel的UI界面出现白屏的情况
查看>>
PhpStrom安装Xdebug调试工具
查看>>
Spark Streaming源码解读之数据清理 内幕
查看>>
项目打包流程
查看>>
vue-cli项目动态引用图片链接问题
查看>>