适用设备: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. 深入理解Java:SimpleDateFormat安全的时间格式化

    这一篇我什么都不写,只推荐一篇大牛的博客,这篇博客给了我很多灵感,让我对多线程理解的更加透彻了; http://www.cnblogs.com/chenying99/articles/3331950. ...

  2. ZwQuerySystemInformation 安全使用心得 Delphi 版

    作为 DELPHI 版本,需要引用 jwaNative, JwaWinType ,他们是 JEDI API 的一部分.JEDI 官网有下载. 先给出 2 个辅助函数 和 一些结构体. type     ...

  3. Hibernate SQL查询 addScalar()或addEntity()

    本文完全引用自: http://www.cnblogs.com/chenyixue/p/5601285.html Hibernate除了支持HQL查询外,还支持原生SQL查询.          对原 ...

  4. java提高篇(十四)-----字符串

          可以证明,字符串操作是计算机程序设计中最常见的行为. 一.String 首先我们要明确,String并不是基本数据类型,而是一个对象,并且是不可变的对象.查看源码就会发现String类为f ...

  5. Testin云测试平台初体验

    这几天偶然接触到了一个叫做Testin的云测试平台,经过一番体验,感觉还是不错的,因为里面提供了大量的测试机型,可以针对Android手机的严重碎片化现象做出比较全面的测试,同时Testin的测试内容 ...

  6. C# 使用Newtonsoft.Json.dll 格式化显示Json串

    private string ConvertJsonString(string str) { //格式化json字符串 JsonSerializer serializer = new JsonSeri ...

  7. C# Remoting的一个简单例子

    .Net对于远程调用提供了两种方法:Remoting和WebService.WebService现在是如火如荼,特别是有一种比较流行的架构:Winform+WebService(Java..Net), ...

  8. 在archlinux上搭建twitter storm cluster

    本文详细描述如何在archlinux上搭建twitter storm cluster,转载请注明出处,谢谢. 有关archlinux基本系统安装,请参照archlinux简明安装指南一文,下面以上述为 ...

  9. jedis操作redis全指南

    package com.wujintao.redis; import java.util.Date; import java.util.HashMap; import java.util.Iterat ...

  10. 25. Reverse Nodes in k-Group

    Given a linked list, reverse the nodes of a linked list k at a time and return its modified list. If ...