移动端网页开发 分享：杨顺心 WEB 前端开发工程师 2014 年. 目录 1 2 3 4 HTML5 现状 移动端 CSS3 移动端 javascript 调式移动端.

Presentation on theme: "移动端网页开发 分享：杨顺心 WEB 前端开发工程师 2014 年. 目录 1 2 3 4 HTML5 现状 移动端 CSS3 移动端 javascript 调式移动端."— Presentation transcript:

1 移动端网页开发 分享：杨顺心 WEB 前端开发工程师 2014 年

2 目录 1 2 3 4 HTML5 现状 移动端 CSS3 移动端 javascript 调式移动端

3 01 / HTM5 埋下的坑 这是业界笼统的概念，对我们来说是指高级的 html ，高级的 css 和高级的 js 。 浏览器支持情况：

4 02/ HTM5 埋下的坑 DTD 和 META ： width - viewport 的宽度 height - viewport 的高度 initial-scale - 初始的缩放比例 minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例 user-scalable - 用户是否可以手动缩放 user-scalable:no 是实现 position:fixed 的关键

5 03/ HTM5 常用标签 header, nav, article, section, aside, footer, time, canvas, audio, video, source PC: iOS: Android: iOS PC Android

6 04/ HTM5 表单控件 iOS6 才开始支持 ， Android 都支持 iOS5 及以上开始支持 input type: date, datetime ， month ， time ， range 但是 week 还不支持 Android 支持情况各有差异，通常就 tel 和 search 类型支持较好

7 05/ HTM5 表单控件 移动端的 html5 表单控件在 iOS6 上的情况：

8 06/ HTM5 表单控件 移动端的 html5 表单控件 tel 、 number 、 search 的效果： tel number search

9 07/ 移动端 CSS3 主要特点： 可以只针对 webkit 内核浏览器编写，支持常见 css3 效果 屏幕小，最常见屏幕宽度是 320px ( iPhone 和大部分 Android ) 、 360px( 小米 2) 、 480px 、 768px ，较老的 Android 手机有 240px 的 有第三方浏览器，如 UC 浏览器、 QQ 浏览器存在 Android 品种繁多，适配麻烦， css3 效果与 iOS 差异大，表 单控件处理常需要借助 js 来 hack

10 08/ 移动端 CSS3

11 09/ 移动端 CSS3 必须重视的 css 差异： 固定定位 (position:fixed),iOS 和 Android 都支持得不好,Android 禁用 掉 页面缩放功能 (viewport 中设置 user-scalable=no) ，但 iOS5 以下系统无效 局部滚动 (overflow:scroll),overflow 也非常不好使， iOS5 以下系统无效 ， iOS5 及以上可以勉强使用 于是才有了 iScroll.js 的模拟滚动 … { -webkit-overflow-scrolling:touch; overflow:auto; }

12 10/ 移动端 CSS3-Media Queries 在 css 中使用 在 link 中使用（注意：即使不符合条件也会加载文件） @media screen and (max-width: 600px) {.class { background: #ccc; } @media screen and (max-device-width: 480px) {.class { background: #ccc; }

13 11/ 移动端 CSS3 多个 Media Queries 针对高清屏幕（视网膜屏幕） 设备横竖状态 @media screen and (min-width: 600px) and (max-width: 900px), only screen and (min-device-width: 768px) and (max-device-width: 1024px) {.class { background: #ccc; }

14 12/ 移动端 CSS3- 常用的 CSS 归纳 去掉点击链接和文本框对象的半透明覆盖层 (iOS) 或者虚框 (Android): -webkit-tap-highlight-color:rgba(0,0,0,0); // 慎重使用，可能会给 Android 表单控件带来巨大麻烦 禁用长按页面时的弹出菜单 (iOS 下有效 ): -webkit-touch-callout:none; 禁止文字自动调整大小 ( 默认情况下旋转设备的时候文字大小会发生变化 ): -webkit-text-size-adjust: none; 禁止页面文字选择 : -webkit-user-select: none; 局部滚动 ( 仅 iOS 5 以上支持 ): -webkit-overflow-scrolling:touch; 转变盒模型 (width 定义变为包含 padding border-width, 不含 margin): -webkit-box-sizing: border-box; 消除输入框和按钮的原生外观，在 iOS 上加上这个属性才能给按钮和输入框自定义样式 : -webkit-appearance: none;

15 13/ 移动端 CSS3- 常用的 CSS 归纳 关于 background-szie ： background-size:x y;// 值是横轴 纵轴 background-size:100%;// 等比例让 x 轴占满该容器， y 轴可能没有占满 background-size:50px 80%; background-size:cover;// 等比例占满容器，按照图片小的那边铺满 background-size:contain;// 等比例缩小 background-size:auto; // 保持原样，不拉伸压缩图片大小 举例： http://ios.mt.renren.com http://s.xnimg.cn/a43735/wap/touch/images/client/icons@2x.png http://ios.mt.renren.comhttp://s.xnimg.cn/a43735/wap/touch/images/client/icons@2x.png

16 14/ 移动端 javascript 移动端的 click 事件： 一系列事件的触发顺序 touchstart touchmove ( 可能没有 ) touchend mouseover mousemove click

17 15/ 移动端 javascript iOS 阻止默认的 click 事件原理： 需要注意： (1) 只是 iOS ，其他平台不必 (2) 在 touchend 时就看手指移动情况来决定该阻止 click 或者是取消 touch 事件 (3) 只有 event 类型为 click 时才有必要阻止 在 touchend 的时候与 touchstart 时比较时间、位置，以区别是否要执行 “ 按下 ” 的 操作。 Zepto 比较好的解释了这个 “ 按下 ” 事件，由一系列的 touch 事件封装成一个 ”tap” 事件。 https://github.com/madrobby/zepto/blob/master/src/touch.js

18 16/ 移动端 javascript 旋转事件： 需要注意： window. onorientationchange var supportsOrientationChange = "onorientationchange" in window, orientationEvent = supportsOrientationChange ? "orientationchange" : "resize"; window.addEventListener(orientationEvent, function() { alert(orientation); if (orientation == 90 || orientation == -90) { alert(' 横屏 '); } else { alert(' 竖屏 ') } }, false);

19 17/ 移动端 javascript 滑动事件原理： 通过事件委托，给 body 绑定 touch 相关的事件，然后在 touchmove 和 touchend 的 时候分别根据手指触摸的对象的位移和方向来判断以便做相应的操作。在 move 过程中超过一定距离之后就开始通过动画如 -webkit-transform 来实现容器的移动 ，并在 touchend 手指离开的时候判断容器该变化还是该归位。 Zepto 中有一段获取移动方向的方法： function swipeDirection(x1, x2, y1, y2) { var xDelta = Math.abs(x1 - x2), yDelta = Math.abs(y1 - y2) return xDelta >= yDelta ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down') }

20 18/ 移动端 javascript LocalStorage 介绍： 数据存储： var arr = [0, 1, 1, 1]; // 本地存储， IE cookie ， 其他浏览器 HTML5 本地存储 if (window.localStorage) { localStorage.setItem(“test", arr); } else { Cookie.write(“test", arr); } 数据读取： var str = window.localStorage? localStorage.getItem(“test"): Cookie.read(“test");

21 19/ 移动端调试 常见方法： 将项目发布到未公开的可通过外网访问的服务器 在本地搭建服务器，在 WIFI 与 PC 同网段的前提下直接通过输入 PC 的 ip 地址进行访问 使用 Fiddler 设置代理

22 20/ 移动端调试 在移动端使用 Fiddler 抓取 http 请求数据： 在自己台式机里面安装 Fiddler2 打开 Fiddler ，选择工具栏 Tools – Fiddler Options – Connections 中勾选 Allow Remote Computers to Connect 查看自己台式机的 IP 地址，如 192.168.0.7 把 iOS 设备连接到和台式机在同一个局域网的 wifi ，打开 iOS 的 wifi 设置，进入当前 wifi 连 接，设置 HTTP 代理 Group ，将服务器填为上一步中获得的台式机 IP ，即 192.168.0.7 ，端 口填 8888 ( 和 Fiddle 设置中一致即可 ) 完成上述操作后，重启 Fiddler ，然后在 Fiddler 中就可以捕捉到 iOS 设备的 http 请求了 如果要转发请求，在主界面的 AutoResponder 选项卡中添加转发规则 ( 支持正则表达式匹 配 ) 有的 android 手机无法设置代理，但是一般比较新的都可以设置。小米手机是典型的可以 的。

23 21/ 移动端调试 在移动端使用 Fiddler 抓取 http 请求数据： PC 上的 fiddler 截图

24 22/ 代码优化 良好的 js 加载方式：......

25 23/ 代码优化 慎重使用的 css 选择器： * 号选择器，据说性能非常差 ( 中枪了 ) 属性选择器，如 div[_href=“http://www.test.com”] 伪类选择器，如 li:first-of-type 后代选择器，如.test div

26 24/ 代码优化 慎重使用的 css3 效果： 大范围的阴影效果， box-shadow 大范围的渐变， -webkit-gradient 大量的圆角元素， border-radius 复杂的动画

27 25/ 代码优化 良好的 js 加载方式： 所有的 JS 文件压缩合并成一个文件在页面顶部异步引入，可以使用两种方式（ 方法 2 的兼容性比较好） : var s = document.createElement("script");s.src = "test.js";document.getElementsByTagName("head")[0].appendChild(s); （ async 和动态创建 JS 方式不能保证多个 JS 文件的执行顺序） 不重要的 JS 文件可以在页面最底部使用 引入并且不会阻塞页面渲染，但是页面底部的外链 文件会推迟 DOMContentLoad 事件，所以页面中的 JS 最好全部使用异步 加载方式。