适用设备：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遇到的各种问题和那些烦人的计算。

HTML5移动Web开发（八）——避免文本字体大小重置的更多相关文章

  1. HTML5移动Web开发实战 PDF扫描版​

    <HTML5移动Web开发实战>提供了应对这一挑战的解决方案.通过阅读本书,你将了解如何有效地利用最新的HTML5的那些针对移动网站的功能,横跨多个移动平台.全书共分10章,从移动Web. ...

  2. iOS NSString 文本不同的颜色 标题+文本字体大小 行间距／删除不需要的字符 ／以及自适应高度

    #import <Foundation/Foundation.h> @interface TextsForRow : NSObject @property(nonatomic,copy)N ...

  3. 浅淡HTML5移动Web开发

    说实话,我们这次开发移动端的项目,整个项目组的人都是第一次,最初立项的时候为是选择native app和web app还争论了一番,最后综合考虑,我们选择了web(我们选择了h5)开发.但从这两种开发 ...

  4. HTML5移动Web开发

    1. 响应式web设计 说到这个,移动开发面对的屏幕尺寸那叫一个丰富,其中安卓阵营就够让人头痛的.我们在PC端常用的两种布局方式就是固定布局和弹性布局,前者设置一个绝大多数电脑能正常显示的固定宽度居中 ...

  5. html5移动Web开发实战

    1.解决横竖屏字体大小变化 html{ -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust:100 ...

  6. 移动端字体缩放问题解决方案-摘自《html5移动web开发实践》

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...

  7. html5移动web开发实战必读书记

    原文  http://itindex.net/detail/50689-html5-移动-web 主题 HTML5 一.配置移动开发环境 1.各种仿真器.模拟器的下载安装 http://www.mob ...

  8. HTML5移动Web开发（九）——优化浏览器视口宽度设置

    每个移动设备都有自己默认的视口宽度,如果你不显示的设置它的值,在渲染页面的时候你可能会得不到你想要的效果.比如,如果不设置iPhone的视口宽度,它将会按照980像素的宽度渲染页面,如果你的页面设计不 ...

  9. HTML5移动Web开发（一）——HTML5和移动网站基本概念以及一些模拟器

    当前,手机设备发展迅猛.屏幕尺寸各不相同.存储和性能仍有局限性,如何结合HTML5的功能,在多平台上创建高性能.响应式的移动网站,是Web开发者所要面对的首要挑战.HTML5以及移动网站都是很有前景的 ...

随机推荐

  1. 安装 webpack

    安装 webpack看好webpack 对自动压缩和文件名自动md5更名,可解决客户端缓存问题.我的安装环境为 centos linux,root用户 1.安装Node及NPM.到NodeJS官网安装 ...

  2. [poi2007]mem

    题意:给定点数n<=300000的一棵树,然后初始时每条边权值为1,接下来按照时间点先后顺序的n+m-1个操作, 操作有两种: 1.A a b 把a到b的边权改为0 2.W u 求1号点到u号点 ...

  3. 在浏览器的JavaScript里new Date().toUTCString()后，传递给C# DateTime().TryParse()会发生什么？

    Format 1. Sun, 09 Oct 2016 13:24:35 GMT Format 2. Sun, 9 Oct 2016 13:36:09 UTC Format 1 是在IE里面产生的(Wi ...

  4. iPhone的Push(推送通知)功能原理浅析

    第一部分:Push原理(以下绝大多数内容参考自.图片来自iPhone OS Reference Library)机制简介Push 的工作机制可以简单的概括为下图图中,Provider是指某个iPhon ...

  5. fallacies of distributed computing

    The network is reliable. Latency is zero. Bandwidth is infinite. The network is secure. Topology doe ...

  6. FSM 浅谈

    之前写过一篇关于状态机的,上一篇讲过的我也就不再罗嗦了,不知道欢迎去查看我的上一篇随笔,主要是感觉上次自己封装的还是不行,所以又进行修改了一番! 我本人是个菜鸟,最开始接触状态机的时候,状态机一个可厉 ...

  7. 跨平台开源通讯组件elastic communication

    elastic communication是基于c#开发支持.net和mono的通讯组件(简称EC),EC的主要目的简化mono和.net下的通讯开发难度,通过EC可以非常快速地开发基于mono和.n ...

  8. Linux CentOS下如何确认MySQL服务已经启动

    Linux CentOS一般做为服务器使用,因此,MySQL服务应该随开机自动启动的.正常情况下,查看开机自动启动的服务使用chkconfig命令,如下: #chkconfig --list 实际使用 ...

  9. 每周一书-2016年8月15日到21日（bootstrap基础教程）获奖读者公布

    本次赠书 由微信昵称为“………….”的网友以10个赞获得. 请这位网友,订阅号回复你的联系方式,明天给你邮递这本书.谢谢!同时感谢<把时间当朋友>的获奖者“永梅”为<bootsrap ...

  10. asp.net core开发环境准备

    1.1  安装sdk和运行时 浏览器打开网址https://www.microsoft.com/net/download, 到.Net Core下载页面. 根据操作系统,下载对应的SDK进行安装.安装 ...