移动WEB开发 总结笔记

一、浏览器，移动端的。

浏览器已经逐渐从传统桌面转向手机端，竞争也越来越激烈。目前国内市场主流的手机浏览器：UC、百度、欧朋、QQ、海豚、safari、Chrome，这些浏览器都是基于webkit内核的，兼容性方面不存在问题，同时对html5和css3的支持很好，所以，大胆地应用html5和css3技术吧。

在开始编写webapp时，前端工程师使用HTML5，而放弃HTML4，因为HTML5可以实现一些HTML4中无法实现的丰富的WEB应用程序  的体验，可以减少开发者很多的工作量，当然了你决定使用HTML5前，一定要对此非常熟悉，要知道HTML5的新标签的作用。比如定义一块内容或文章区域 可使用section标签，定义导航条或选项卡可以直接使用nav标签等等。

二、分辨率

手机分辨率比PC分辨率要庞杂得多，各种分辨率有木有？大小差距那么大有木有？这在一定程度上给页面制作带来了不小的麻烦。所以针对这样的因素，必须有充分的考虑。考虑到浏览器自适应，需要设计和制作完成各种不同的方法。

1) 市场上主流手机生产商的产品分辨率。经过调研发现，目前主流的手机分辨率为：480*800像素、320*480像素，而1280*720像素（720P）会是接下来的趋势。这些都是很粗略的统计，要有精确的数据需要花费不少的精力，那是数据分析人员的工作。

2) 项目目标群所持设备的分辨率。项目目标群即用户，用户拥有什么样的手机分辨率，从一定程度上来说比第一点来得更加重要，它决定着项目开发的方向。

三、开发总结

3.1、响应式

在编写CSS时，我不建议前端工程师把容器（不管是外层容器还是内层）的宽度定死。为达到适配各种手持设备，我建议前端工程师使用自适应布局模式（支付 宝  采用了自适应布局模式），因为这样做可以让你的页面在ipad、itouch、ipod、iphone、android、web   safarik、chrome都能够正常的显示，你无需再次考虑设备的分辨率。

响应式web开发不是一项开创性的技术变革，简单地说，响应式web设计采用了媒体查询、流式布局、液态图片三项技术，把它们组合在一起来制作页面，使得页面不只在传统桌面，在平板电脑和手机上，各种不同的分辨率都能够完美显示。而要做到这点，我觉得不难，请继续往下：

3.2、响应式web设计之流式布局：

流式布局以百分比进行布局。最重要是时刻关注元素的父级层，所有的元素都是以父级层为基准。流式布局的应用是为了和媒体查询完美地结合，形成平滑的布局变 化跳转效果。一般而言，media里的样式多以width、padding、margin、font-size、line-height这些为主。

3.3、响应式web设计之液态图片：

要实现液态图片，只需加入如下代码：img{max-width:100%;}

3.5、关于自体的设置。

-webkit-text-size-adjust:none

不会随着屏幕的大小而自动改变字体的大小了。

3.6、字体单位：rem。它可以根据页面根元素的字体大小而改变，可用作手机端的适配，比较方便。

3.7、一些小的建议

（1）、如何禁止用户旋转设备
这里其实是想告诉你在浏览器里办不到，因为禁止开发者阻止浏览器的orientationchange事件。

（2）、禁用自动识别电话号码
在开发项目的时候，我们经常会用到一些数字或者就是电话号码，但是又不想系统自动识别让用户可以直接拨打，我们只需要在标签之间加入即可，但是有些特殊情况我们需要可以用户直接拨打。

（3）盒子边框溢出
当我们指定了一个块级元素时，并且为其定义了边框，设置了其宽度为100％。按照盒子模型，就会发现该元素的左右边框各1个像素会溢了，导致出现横向滚动条，这时候我们可以为其添加-webkit-box-sizing:border-box用来指定该盒子的大小包括边框的宽度。

（4）、ios数字颜色样式超过9位后失控
这个问题我不知道该怎么描述，就是在ios中，当数字超过9位数时，浏览器会给这个数字默认加上一个颜色，无论你设置什么颜色都无效。

（5）、iOS可禁止用户在新窗口打开页面
在项目开发中，有时我们需要某个链接在当前页面打开，这样需要禁止用户在新窗口打开页面，我们可以使用a标签的target=”_self”指定在当前页面打开，但是在iOS中长按链接一段时间后，系统会弹出一个对话框，用户可以通过点击”在新页面中打开”来在新窗口打开页面，这样我们指定的target属性就失效了，但是可以通过指定当前元素的-webkit-touch-callout属性为none来禁止iOS弹出这些按钮。

（6）、CSS3绘图和CSS3动画
在html5和css3的世界里，很多图片都是多余的，我们可以尽情发挥自己的想象，让CSS3替代不必要的图片不必要的JavaScript，另外做CSS3动画时最好将动画代码提取出来单独命名。

四、苹果浏览器中的开发总结

1、webkit 内核中一些私有的meta标签

<metaname="apple-mobile-web-app-capable"content="yes"><metaname="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/><metaname="apple-mobile-web-app-status-bar-style"content="black"/><metaname="apple-mobile-web-app-title"content="测试APP">

第一个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览，在ios上，用户将网页添加到主屏后，再从主屏幕打开这个网页，可以隐藏浏览器的地址栏和下面的toolbar；

第二个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；

第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式，其值有三个：default、black、black-translucent。

第四个meta标签是指在发送到屏幕的时候默认的命名。

用户添加到主屏后，如果网站没有图标，则默认主屏上的图标为当前网页的截图，你可以通过下面的代码指定在普通和retina屏幕上的icon：

<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon.png"> 

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-precomposed.png">

<metacontent="telephone=no"name="format-detection"/>

<!--告诉设备忽略将页面中的数字识别为电话号码-->

<metacontent="email=no"name="format-detection"/> 

<!--不让android识别邮箱-->

2、添加初始化图片。

用户点击你桌面上的webapp的图标后，打开会加载浏览器（实际上是webkit webview模块），然后下载、解析、渲染，在这个过程中，ios允许我们使用一个初始化图片来替代白色的浏览器屏幕：

<linkrel="apple-touch-startup-image" sizes="320x460"href="imgs/setupImg320.png"/><linkrel="apple-touch-startup-image" sizes="640x920"href="imgs/setupImg640.png"/><linkrel="apple-touch-startup-image" sizes="640x1096"href="Images/setupImg5.png"/>

3、关闭IOS中键盘自动大写、自动更正、自动完成。

在iOS中，当虚拟键盘弹出时，默认情况下键盘是开启首字母大写的功能的，根据某些业务场景，可能我们需要关闭这个功能，移动版本webkit为input元素提供了autocapitalize属性，通过指定autocapitalize=”off”来关闭键盘默认首字母大写。还有的是自动更正、自动完成给你可以一并取消：

<input autocorrect=”off” autocomplete=”off” autocapitalize=”off”>

4、文件上传，从相机捕获媒体。

<inputtype="file"accept="image/*; capture=camera"/><inputtype="file"accept="video/*; capture=camcorder"/><inputtype="file"accept="audio/*; capture=microphone"/>

5、电话短信。

<ahref="sms:18888886666,18888885555″]]> 发送短信给多个人 的链接<ahref="sms:18888886666?body=sms txt"]]> 发送短信附带内容 的链接<ahref="tel:[phone]"]]>Call us at 18888886666</a]]> 拨打电话的链接

6、移除IOS默认的按钮样式。

在iOS 中，默认会将所有的按钮（input）强制加上一个圆角和渐变样式（IOS7的不知是怎样的了），要移除这个默认样式，用下面的代码（建议直接reset那里添加）：

input{-webkit-appearance:none;outline:none;}

7、IOS浏览器横屏时会重置字体大小的问题。

iOS 浏览器横屏时会重置字体大小，设置 text-size-adjust 为 none 可以解决ios上的问题，但桌面版safari的字体缩放功能会失效，因此最佳方案是将 text-size-adjust 为 100% 。

-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;

8、CSS3的transition闪屏的问题。

使用css3动画的时尽量利用3D加速，从而使得动画变得流畅（可参考《移动Web 开发中的 Off Canvas 导航》这篇文章）。动画过程中的动画闪白可以通过backface-visibility 隐藏。

-webkit-transform-style: preserve-3d;/*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/ -webkit-backface-visibility: hidden;/*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/

9、其他css的杂项。

-webkit-tap-highlight-color:transparent;/*Mobile上点击链接高亮的时候设置颜色为透明*/-webkit-user-select:none;/*设置为无法选择文本*/-webkit-touch-callout:none;/*长按时不触发系统的菜单（禁止ios弹出各种操作窗口）, 可用在图片上加这个属性禁止下载图片*/-webkit-overflow-scrolling: touch;/*快速滚动和回弹，模拟原生app效果*/

10、click事件

ios的safari的click事件在短按屏幕时会有明显延迟（相对用户手离开屏幕那一刻大约300ms），因此建议采用 touchstart 事件。或者是说使用封装的 tap 事件来代替click 事件，所谓的 tap 事件由 touchstart 事件 + touchmove 判断 + touchend 事件封装组成。

11、其他js杂项

window.scrollTo(0,0);/*隐藏地址栏*/ 

window.matchMedia();/*匹配媒体*/ 

navigator.connection;/*决定手机是否运行在WiFi/3G等网络*/ 

window.devicePixelRatio;/*决定屏幕分辨率(iPhone 4值为2, 而Nexus One值为1.5)*/ 

window.navigator.onLine;/*取得网络连接状态*/

window.navigator.standalone;/*决定iPhone是否处于全屏状态 touch事件 (iOS, Android 2.2+): touchstart, touchmove, touchend, touchcancel gesture事件 (Apple only, iOS 2+): gesturestart, gesturechange, gesturend give access to predefined gestures (rotation, scale, position)