移动端web开发技巧与经验分享.pdf

移动端web开发技巧与经验分享 移动端web开发技巧汇总与经验分享，已经涵盖了web移动端开发的方方面面，web移动端开发 不可多得的干货，值得一看。 meta标签，这些meta标签在开发webapp 时起到非常重要的作用 (1)meta content= ” width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0″ name=”viewport” / (2)meta content=”yes” name=”apple-mobile-web-app-capable” / (3)meta content=”black” name=”apple-mobile-web-app-status-bar-style” / (4)meta content=”telephone=no” name=”format-detection” / 第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是 1.0，且不允许用户点击屏幕放大浏览；尤其要注意的是content里多个属性的设置一定要用分号+ 空格来隔开，如果不规范将不会起作用。 其中： width –viewport 的宽度 height –viewport 的高度 initial-scale –初始的缩放比例 minimum-scale –允许用户缩放到的最小比例 maximum-scale –允许用户缩放到的最大比例 user-scalable –用户是否可以手动缩放 第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览； 第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式； 第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码 在设置了initial-scale=1 之后，我们终于可以以1:1 的比例进行页面设计了。关于viewport， 还有一个很重要的概念是：iphone 的safari 浏览器完全没有滚动条，而且不是简单的 “隐藏滚动 条”，是根本没有这个功能。iphone 的safari 浏览器实际上从一开始就完整显示了这个网页，然 后用viewport 查看其中的一部分。当你用手指拖动时，其实拖的不是页面，而是viewport。浏览器 行为的改变不止是滚动条，交互事件也跟普通桌面不一样。(请参考：指尖的下JS 系列文章) 点击与click事件 对于a标记的点击导航，默认是在onclick事件中处理的。而移动客户端对onclick的响应相比 PC浏览器有着明显的几百毫秒延迟。 在移动浏览器中对触摸事件的响应顺序应当是： ontouchstart - ontouchmove - ontouchend - onclick 因此，如果确实要加快对点击事件的响应，就应当绑定ontouchend事件。 使用click会出现绑定点击区域闪一下的情况，解决：给该元素一个样式如下 -webkit-tap-highlight-color: rgba(0,0,0,0); 如果不使用click，也不能简单的用touchstart或touchend替代，需要用touchstart的模拟 一个click事件，并且不能发生touchmove事件，或者用zepto中的tap （轻击）事件。 body { -webkit-overflow-scrolling: touch; } 用iphone或ipad浏览很长的网页滚动时的滑动效果很不错吧？不过如果是一个div，然后设置 height:200px;overflow:auto;的话，可以滚动但是完全没有那滑动效果，很郁闷吧？ 我看到很多网站为了实现这一效果，