适用设备: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. 使用vlc进行二次开发做自己的播放器

    可参考: 使用vlc播放器做rtsp服务器 使用vlc播放器播放rtsp视频 web网页中使用vlc插件播放相机rtsp流视频 使用 https://github.com/ZeBobo5/Vlc.Do ...

  2. js随机生成颜色代码

    function generyRandomColor() { return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toStri ...

  3. 道路翻新 (Revamping Trails, USACO 2009 Feb)

    题意:给定m<=50000的1-n有联通的图,求最多可以使K<=20条边变为0的情况下的最短路是多少.. 思路:简单的分层图最短路,对于每个点拆成K个点.. 然后求一边最短路.. code ...

  4. VIJOS P1426兴奋剂检查[DP 状态哈希]

    背景 北京奥运会开幕了,这是中国人的骄傲和自豪,中国健儿在运动场上已经创造了一个又一个辉煌,super pig也不例外……………… 描述 虽然兴奋剂是奥运会及其他重要比赛的禁药,是禁止服用的.但是运动 ...

  5. 2 GPS utility methods

    Methond 1 is to check whether the GPS is on: 1 2 3 4 5 public boolean isGPSIsOn() { LocationManager ...

  6. Android学习笔记之ConnectivityManager+NetWorkInfo

    PS:眼看就要开学了,该收收心了. 学习内容: 1.ConnecivityManager 2.NetWorkInfo   ConnectivityManger:网络连接管理者,用于管理Android设 ...

  7. hdu4185解题报告

    这里我居然能自己想想到怎么建图匹配,很是不容易... 题意:这里有一片油田,但是不是纯净的,有的地方是水,现在有一个捞石油的机器,但是这个机器捞的范围是固定的,是2*1的一个矩形大小,那么对于整个油田 ...

  8. C++静态成员总结(转)

    类中的静态成员真是个让人爱恨交加的特性.我决定好好总结一下静态类成员的知识点,以便自己在以后面试中,在此类问题上不在被动. 静态类成员包括静态数据成员和静态函数成员两部分. 一 静态数据成员: 类体中 ...

  9. C#中数组、ArrayList和List&lt;T&gt;三者的发展历程

    在C#中数组,ArrayList,List使我们用的最多的类型之一.他们共同的作用都是能够存储一组对象. 那么问题来了: (1)为什么要有三个一样作用的东西呢?他们都很完美吗? (2)谁先出生,又是因 ...

  10. EntityFramework程序集版本不同

    问题: Normal 0 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE /* Style Definitions */ table.MsoNormalT ...