适用设备：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. PHP 表单验证

    1. 验证文本框是否有内容且不能为空 <?php if (! (filter_has_var(INPUT_POST, 'flavor') && (strlen(filter_in ...

  2. 初识selenium--百度实例录制

    Selenium 是一个web的自动化测试工具,不少学习功能自动化的朋友首选的就是Selenium,它相比QTP有许多优点(QTP笔者由于种种原因暂未使用过O(∩_∩)O哈!): ①Selenium是 ...

  3. Jexus V5.8.0正式发布：跨平台的ASP.NET WEB服务器

    Jexus Web Server V5.8.0 已于今日(12月10日)正式发布,下载地址:http://www.linuxdot.net/. Jexus v5.8.0有如下的更新: 1,为反向代理增 ...

  4. 生成PDF的新选择-Phantomjs

    最近在node.js项目开发中,遇见生成PDF的需求,当然生成PDF不是一个新意的需求:我可以选择利用开源的pdfkit或者其他node pdf模块,或者通过edge.js调用.net/python下 ...

  5. [.net 面向对象编程基础] (15) 抽象类

    [.net 面向对象编程基础] (15) 抽象类 前面我们已经使用到了虚方法(使用 Virtual修饰符)和抽象类及抽象方法(使用abstract修饰符)我们在多态一节中说到要实现类成员的重写必须定义 ...

  6. 浅谈Excel开发：十 Excel 开发中与线程相关的若干问题

    采用VSTO或者Shared Add-in等技术开发Excel插件,其实是在与Excel提供的API在打交道,Excel本身的组件大多数都是COM组件,也就是说通过Excel PIA来与COM进行交互 ...

  7. IOS Socket 02-Socket基础知识

    1. 简介 Socket就是为网络服务提供的一种机制 通信的两端都是Socket 网络通信其实就是Socket间的通信 数据在两个Socket间通过IO传输 2. Socket通信流程图 3. 模拟Q ...

  8. IOS Animation-KeyPath值

    IOS Animation-KeyPath值 keyPath值 说明 值类型 position 移动位置 CGPoint opacity 透明度 0-1 bounds 变大与位置 CGRect bou ...

  9. xamarin UWP平台下 HUD 自定义弹窗

    在我的上一篇博客中我写了一个在xamarin的UWP平台下的自定义弹窗控件.在上篇文章中介绍了一种弹窗的写法,但在实际应用中发现了该方法的不足: 1.当弹窗出现后,我们拖动整个窗口大小的时候,弹窗的窗 ...

  10. 爱上MVC3~MVC+ZTree实现对树的CURD及拖拽操作

    回到目录 上一讲中,我们学习了如何使用zTree对一棵大树(大数据量的树型结构的数据表,呵呵,名称有点绕,但说的是事实)进行异步加载,今天这讲,我们来说说,如何去操作这棵大树,无非就是添加子节点,删除 ...