适用设备：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. html中使用js实现内容过长时部分

    有时数据内容太长时我们并不希望其全部显示出来,因为这样可能会导致用于显示这些内容的标签被撑开影响美观. 这时就希望能够实现默认只显示部分内容,在鼠标放上去的时候再将全部的内容显示出来. 这里提供一个简 ...

  2. MyEclipse 常用操作

    1.使用JREBEL插件包实现myeclipse修改类文件后无须重启 在Myeclipse中的window-preferences(搜索tomcat)->然后到tomcatx.x下的-jdk中配 ...

  3. Xamarin 跨移动端开发系列（01） -- 搭建环境、编译、调试、部署、运行

    如果是.NET开发人员,想学习手机应用开发(Android和iOS),Xamarin 无疑是最好的选择,编写一次,即可发布到Android和iOS平台,真是利器中的利器啊!好了,废话不多说,就开始吧, ...

  4. git版本管理策略及相关技巧(A)

    公司几乎所有的项目都是使用 git 仓库来管理代码,以前对 git 只有些肤浅的了解,每次提交代码或者上线的时候总是会提心吊胆,生怕出现一些未知的问题.经过三个月的踩坑和填坑, git 操作颇显成熟. ...

  5. tsd-提升IDE对JavaScript智能感知的能力

    在编写前端JavaScript代码时,最痛苦的莫过于代码的智能感知(Intelli Sense). 追其根源,是因为JavaScript是一门弱类型的动态语言.对于弱类型的动态语言来说,智能感知就是I ...

  6. 为Angularjs ngOptions加上index解决方案

    今天在Angularjs交流群中有位童学问道如何为Angular select的ngOptions像Angularjs的ngRepeat一样加上一个索引$index. 其实对于这个问题来说Angula ...

  7. java提高篇(十三)-----equals()方法总结

    equals() 超类Object中有这个equals()方法,该方法主要用于比较两个对象是否相等.该方法的源码如下: public boolean equals(Object obj) { retu ...

  8. C#Light 再推荐，顺便介绍WP8 功能展示项目

    由于在项目中验证了C#Light脚本,C#Light的健壮和稳定程度已经得到了很大的提升. 现在可以更好的把C#Light介绍给大家使用,同时也有更多的自信,告诉大家这是一个已经具有商业价值的类库. ...

  9. python sorted排序

    python sorted排序 Python不仅提供了list.sort()方法来实现列表的排序,而且提供了内建sorted()函数来实现对复杂列表的排序以及按照字典的key和value进行排序. s ...

  10. WKInterfaceImage 无法更新图片的问题

    最近涉及到AppleWatch的相关项目,但有个奇怪问题无法解决,而且无法理解: 根据不同的用户操作,需要修改播放器的专辑图片. 不知道跟我的项目需求是不是有关系:我需要轮询共享空间,以拿取同步数据, ...