您的位置：首页 > Web前端 > HTML5

HTML5移动Web开发（八）——避免文本字体大小重置

2015-10-06 16:58 761 查看

适用设备：iOS、Windows Mobile
在一些移动设备上，比方说iPhone,Windows Mobile，当用户把手机切换到横屏时，浏览器会自动地重置文本字体大小。这可能会对我们造成困扰，因为我们希望能够完全掌控用户界面的设计和浏览器对页面的渲染结果。

新建ch02r02.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script src="modernizr-1.7.min.js"></script>
<style>
figure, figcaption, header {
display:block;
margin:0 auto;
text-align:center;
}
</style>
</head>
<body>
<header>
HTML5 Logo
</header>
<figure>
<img src="img/HTML5_Badge_128.png" />
<figcaption>
It stands strong and true, resilient and universal as the markup you write.
It shines as bright and as bold as the forward-thinking, dedicated web developers you are.
It's the standard's standard, a pennant for progress.
And it certainly doesn't use tables for layout.
</figcaption>
</figure>
<footer>
</footer>
</body>
</html>

在iPhone的竖屏渲染该文件时，一切正常。切换到到横屏时，该页面的字体大小会突然的放大，显而易见，该页面的字体大小被重置了，这并不是我们期望的结果。如效果图：

解决：
在页面的CSS部分加入：

html {
-webkit-text-size-adjust: none;
}

作用就是告诉WebKit引擎在渲染该页面时不要自动调整文本字体大小。这样再切换到横屏时，字体大小就不会重置了。

但是如果在PC桌面访问，或者通过其他的非移动设备的浏览器访问，该你设置会导致页面的缩放功能会被禁用。为了防止这种易用性的问题，可以把text-size-adjust的值变为100%,所以上面的例子改进为：

html {
-webkit-text-size-adjust: 100%;
}

除了iPhone之外，其他的移动设备同样也有方法设置“text-size-adjust”属性。
Windows Mobile
Windows Mobile IE中“text-size-adjust”属性使用了不同前缀名，他们原本也打算使用webkit作为该属性的前缀，因为这样可以和其他浏览器保持一致，从而降低Web开发人员的工作难度，开发人员不需要再去考虑在页面应该添加哪一些特殊前缀的“text-size-adjust”属性来控制文本字体大小缩放的问题。更有趣的是，微软认为，对于这样属性，最常用的情况应该是显示的设置为none，不要重置文本字体大小。

微软认为最好的方式是只实现以ms为前缀的版本而不是webkit版本。所以对前面的例子这样改更完整：

html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}

另外，我们可以在例子中添加一行没有前缀的“text-size-adjust”属性，以便更好的应对未来变化：

html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
}

px,em,谁更好？
在Web开发领域，关于应该使用px(像素)还是em(相对长度单位，相对于当前对象内文本的字体尺寸)的争论不绝于耳，但是，这个问题在移动互联网开发领域，争论并没有那么激烈，Yahoo!的用户接口原本使用的单位是em，他们这么做的原因是IE6不支持px级别的缩放。但是，这在移动互联网开发领域并不是问题，及时在PC的浏览器上，也不用太过在意这个问题，因为使用IE6 的用户已经越来越少了。因此，在大部分场景下，你都可以使用像素设置字体大小，抛开使用em遇到的各种问题和那些烦人的计算。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航