适用设备: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开发

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

  2. html5移动Web开发实战

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

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

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

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

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

  5. HTML5移动Web开发(九)——优化浏览器视口宽度设置

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

  6. HTML5移动Web开发(一)——HTML5和移动网站基本概念以及一些模拟器

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

  7. HTML5移动Web开发(十)——在浏览器中启动手机原生应用

    用户可以在浏览器中启动移动设备的原生应用程序,比如地图.电话.短信等,具体能够启动哪些应用程序,这取决于该移动设备上哪些原生应用是否允许从浏览器启动. 新建ch02r05.html <!doct ...

  8. HTML5移动Web开发(七)——通过界面图标启动Web应用

    现在我们要使用手机上某个应用时,通过点击屏幕上的图标就可以运行.但是对基于HTML的Web应用来说,运行起来就比较麻烦了,用户必须先打开浏览器,然后访问想使用的应用程序站点.现在我们想把一个指定的We ...

  9. HTML5移动Web开发(六)——定义一个内容策略

    通过分析工具搜集到的数据,你可以定义一个内容策略,这对已经有了一个桌面网站的人是非常有用的. 1.确认你已经把分析工具的Javascript代码嵌入到网站中.(http://www.cnblogs.c ...

随机推荐

  1. 【Hibernate框架】三种继承映射

    一.综述 大家都知道,hibernate作为ORM框架的一个具体实现,最大的一个优点就是是我们的开发更加的能体现出"面向对象"的思想.在面向对象开发中,类与类之间是可以相互继承的( ...

  2. C# 将excel表格嵌入到Word中

    C# 将excel表格嵌入到Word中 继续开扒,今天要实现的是使用C#将excel表格嵌入到Word中这个功能,将word表格导入到excel中我已经写过了,如有需要可参考我之前的文章,在开始前还有 ...

  3. gcc中__builtin_return_address和__VA_ARGS__

    — Built-in Function: void * __builtin_return_address (unsigned int level) This function returns the ...

  4. JavaScript 介绍

          JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 ...

  5. Linode VPS上部署vpn成功

    环境: CentOS 6.5 (Latest 64 bit (3.15.4-x86_64-linode45)) 采用网上一键安装的脚本:如果下载不了,下面有代码.wget http://www.hi- ...

  6. 向NFV过渡 这三个坑我替你趟了

    网络功能虚拟化(NFV)在最近几年不断发展,并开始现实商业部署.通信服务商也必须解决自身所面临的挑战,包括安全.性能.投入产出比.与现有网络实现电信级交互.运营支撑系统(OSS)和业务支撑系统(BSS ...

  7. java实现将汉字转为拼音

    有时候为了方便操作程序的开发,需要将汉字转为拼音等操作.下面这个是自己结合网上的资料,加上自己在公司项目中的亲自实践.完整的实现了将汉字转为拼音的操作.这个Demo只是负责将其转换,在main方法中测 ...

  8. PyCharm光标变粗的解决办法

    pycharm中光标变粗,如下: 此时变成了改写模式,只需要按下键盘的insert键即可

  9. webpack入坑之旅(一)入门安装

    学习一个新的东西,首先第一步就是安装,有时候会遇到各种奇葩的问题 至于什么是webpack我这里就不介绍了,请参考官网:https://github.com/webpack/webpack 安装 前提 ...

  10. centos 7.0 编译安装mysql 5.6.22 再次总结 成功编译安装~ 越来越熟练了~

    查找php.ini文件所在位置 [root@localhost /]# find -name php.ini ./usr/etc/php/etc/php.ini mysql官网的安装说明http:// ...