Web App 响应式页面制作 笔记整理

转自：http://www.ituring.com.cn/article/69192

简介：新年伊始，按照上层指示，开始着力于移动端的界面制作，优化和兼容性调整工作。因此，整理了一些入门级的知识，比较实用，如取消移动端的默认样式，取消点击表单后的延迟时间等，都是日常项目中碰到的问题，部分整理自网络，部分按照自己的理解，从《Apress.Beginning.iPhone.and.iPad.Web.Apps.Nov.2010》一书中翻译的，本文将长期更新。

一、移动端种类、分辨率大小

说明： 以主流的iPad、iPhone为例。
工具： Resizer官网：Resizer
用法： 将通栏处写有 “Click or Bookmark”的蓝色按钮拖拽至标签栏（加入收藏，注意，不是上面的官网地址） 。先打开要进行测试的页面，再点击已加入收藏夹的标签即可。此时被测试页面顶部会多出一条工具栏，于是就可以根据需求任意进行测试。

1. 分辨率：预设的分辨率有（可切换横版，竖版）
   普通智能手机：320×480
   iPhone5：320×568
   普通平板：800×600
   iPad2、3、mini：768×1024
   宽屏电脑：1280×800
   HDTV：1920×1080
   另外，也可以自定义分辨率。

2.节省样式的加载
目前而言，要改变网站的配色方案或者写iPad专用的样式表，是通过如下代码：

@media only screen and (min-device-width:640px) { ... }//例如，适应某设备的分辨率

其实，没有必要这样让你的样式表白白超载。可以通过下面这个方法去加载指定分辨率下的样式。

<link rel="stylesheet" href="css.css" media="only screen and (min-device-width:640px)">

这样的好处是，只有当你的使用相应的设备，才能加载到相应的样式表。

二、meta标签

1) <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> //强制让文档的宽度与设备的宽度保持1:1， //文档初始化缩放比例是1:1， //不允许用户点击屏幕放大浏览， //允许用户缩放到的最大比例， //尤其要注意的是content里多个属性的设置一定要用分号+空格来隔开，如果不规范将不会起作用。 其他属性有： width; height; initial-scale; minimum-scale; maximum-scale; user-scalable; 2) <meta name="apple-mobile-web-app-capable" content="yes" /> //iPhone私有标签，它表示：允许全屏模式浏览 3) <meta name="apple-mobile-web-app-status-bar-style" content="black" /> //iPhone私有标签，它指定的iPhone中safari顶端的状态条的样式 4) <meta name="format-detection" content="telephone=no; email=no" /> //不识别邮件和不把数字识别为电话号码

二、CSS3 -webkit

1、问题描述：移动端表单类有圆角、阴影，点击链接时，有灰色底高亮等

1) 消除被点击元素的外观变化，所谓的点击后高亮： -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 2) 阻止旋转屏幕时自动调整字体大小：-webkit-text-size-adjust:none; 3) 解决字体在移动端比例缩小后出现锯齿的问题：-webkit-font-smoothing: antialiased; 4) 盒子阴影：-webkit-box-shadow: none; 5) 圆角：-webkit-border-radius: 0; 6) appearance 属性使元素看上去像标准的用户界面元素， 也可以取消默认的样式：-webkit-appearance: none; 7) 鼠标可以悬停在内容上（指向该内容）而不激活它（单击它）：-webkit-touch-action: manipulation; 

三、使用自适应模式布局

为了让用户在safari中正常的浏览网页，我们必须保证用户的设备处于任何一个方位时，safari都能够正常的显示网页内容（也就是自适应），而且自适应之后也不用考虑分辨率的问题。
比如：-webkit-box，流体盒模型，这是一种自适应的解决方案。点此详情

四、javascript库

1.retina.js(官网貌似打不开了，另附下载通道)
有很多设备的“devicePixelRatio”都大于1.5或者等于2（window.devicePixelRatio = 物理像素/dips）。 移动端web app上CSS要为Retian屏幕准备另外的图片及代码：
方法一：

<script type="text/javascript" src="<路径>/retina.js"></script>//使用方法 <style> .logo { background-image: url('/images/my_image.png'); //通用屏幕 } @media all and (-webkit-min-device-pixel-ratio: 1.5) { //当使用Retina屏幕时，读取此段样式 .logo { background-image: url('/images/[email protected]'); background-size: 200px 100px; //限定大图片的大小 } } </style>

方法二：

<img src="/images/image.png" /> //通用屏幕 <img src="/images/my_image.png" data-at2x="<路径>/[email protected]" /> //retina屏幕

2. fastclick.js
说明：这个要重点介绍一下！
当触发"Click"事件时，移动端浏览器将等待约300毫秒的时间后再做出响应，原因是浏览器要判断用户是否执行双击。
导入 fastclick.js 即可减少这个时间差：

<script type='application/javascript' src='/path/to/fastclick.js'></script>

jQuery 使用方法：

$(function() { FastClick.attach(document.body); });

五、App icon 制作

说明：所谓单机模式，其实就是通过把网站添加到主屏，由主屏进入并访问网站的一种方式。通常，app icon是自动截取网站的一部分截图。这样并不是很美观，但也可以通过代码来解决这个问题。
尺寸：在iPhone上的默认大小是57px，在iPad上是72px。icon原始图片建议尺寸为128px或者256，并且不建议自行添加光影效果，因为OS自带了。

<link rel="apple-touch-icon" href="/path/to/custom-icon.png"> // 若想去掉系统自带的反光效果，可以增加“-precompsed”属性。 <link rel="apple-touch-icon-precompsed" href="/path/to/custom-icon.png"> 

App Icon 设计资源：
图标模板：App Icon Template
设计灵感：iOS Icon Gallery，Hongkiat
制作工具：MakeAppIcon，iconkit（付费软件）

其他技巧

1. Float属性替换
   使用display：inline-block属性代替；因为float不适用于反向停靠和无法接受水平间隙

2. 检测用户是通过主屏启动你的web app
   从主屏启动的web app和浏览器访问web app最大的区别 是它清除了浏览器上方和下方的工具条，这样web app就更加像是native app了。

   window.navigation.standalone if(!window.navigation.standalone) { ...// do your magic }

   此外，还可以通过以下方式，停留在单机模式中。

   //最简单的方法 <a href="http://www.qmyo.com/" onclick="window.location.href=this.href; return false">QmyO</a> //改进一下，写成函数 function openLink(anchor) { window.location.href = anchor.href; return false; } //调用 <a href="http://www.QmyO.com/" onclick="return openLink(this)">QmyO</a> //更广泛的使用，如页面导航 /* 创建一个全局点击事件监听器 */ document.addEventListener("click", clickHandler, false); function clickHandler(e) { var element = e.target; /* 只处理锚标签元素 <a> */ if (element.localName.toUpperCase() != 'A') { return; } /* 忽略target属性。*/ if (!!element.getAttribute('target')) { return; } var url = element.href; /* 忽略不符合https正则规范以为的内容并区分来源 */ var match = url.match(/^https?:\/\/(.+?)\/.*$/); if (!match || match[1] != window.location.host) { return; } /* 最后打开全屏幕视图的链接，来防止默认行为 */ window.location.href = url; e.preventDefault(); } //注意：当a标签含有子标签如： <a href="pic.png"><img src="pic.png"></a> 这个脚本就不起作用了，因为接收事件的不是链接，而是img标签。 但其他情况下都能使用户留在单机模式内。当点击外部链接时，OS可能会跳至浏览器。

3. 如何解决盒子边框溢出 当指定了一个块级元素时，并且为其定义了边框，设置了其宽度为100％。在移动设备开发过程中我们通常会对文本框定义为宽度100％，将其定义为块级元 素以实现全屏自适应的样式，但此时，该元素的边框(左右)各1个像素会溢了文档，导致出现横向滚动条，为解决这一问题，可以为其添加一个特殊的样式：

   -webkit-box-sizing:border-box; //用来指定该盒子的大小包括边框的宽度。

4. 自动大写与自动修正
   关闭这两项功能，可以通过autocapitalize 与autocorrect 这两个选项

   <input type="text" autocapitalize="off" autocorrect="off" />

5. 横板与竖版
   方法一：

   <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" /> // 肖像模式样式 <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" /> // 风景模式样式

   方法二：

   //肖像模式样式 <style media="all and (orientation:portrait)" type="text/css"> #landscape { display: none; } </style> //风景模式样式 <style media="all and (orientation:landscape)" type="text/css"> #portrait { display: none; } </style> 

本文仅用于学习和交流目的，不代表图灵社区观点。非商业转载请注明作译者、出处，并保留本文的原始链接。