前端开发

 首页 > 前端开发 > css教程 > CSS中的-webkit-text-size-adjust属性

CSS中的-webkit-text-size-adjust属性

分享到:
【字体:
导读:
         [导读] CSS中的-webkit-text-size-adjust属性详解 在css里发现这么一个属性 -webkit-text-size-adjust ,百度了一下,发现知乎上有位大神的回复很不错,先搬过来参考一下,以后有时间在研究。 -webkit-tex...

CSS中的-webkit-text-size-adjust属性详解

在css里发现这么一个属性 -webkit-text-size-adjust ,百度了一下,发现知乎上有位大神的回复很不错,先搬过来参考一下,以后有时间在研究。

-webkit-text-size-adjust 的本职是用于mobile的,见规范 CSS Mobile Text Size Adjustment Module Level 1 和 apple 的 Safari Web Content Guide

之所以现在的桌面版webkit浏览器支持他,是因为实际上这是一下bug。Bug 56543 – CSS property "-webkit-text-size-adjust" means different things in Safari and iOS

这个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( ) 缩小到合适值。


分享到:
css3动画animate播放完暂停最后一帧anima...
css3动画animate播放完暂停最后一帧 用到:animation-fill-mode 属性 语法 animation-fill-mode : none | forwards | backwards | both; 值 描述 none 不改变默认行为。 forwards 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。 backwards 在 animation-delay 所指定的一段时间内,在动...
DIV+CSS实现电台列表设计的示例代码
CSS Spite技术:也就是CSS精灵技术,实际上CSS的精灵就是图片里的一个个的图标元素,这些图标可以使按钮、标签以及logo等等。很多网站中都应用了该技术,可有效减少传输请求次数,所需要的图标汇总在一张图片中,一次下载即可整个页面应用 以下示例主要是CSS精灵技术的应用,直接Po代码:          酷狗电台...
  •         php迷,一个php技术的分享社区,专属您自己的技术摘抄本、收藏夹。
  • 在这里……