mobile web 手机开发

1.   -webkit-tap-highlight-color

-webkit-tap-highlight-color:rgba(255,255,255,0);

用来把android上点击网页时出现的橙色框的设置为透明

2.  抓取手指坐标

通常在touchstart或者touchmove事件发生的时候，我们这样取值   e.touches[0].pageX 、e.touches[0].pageY

但是在touchend事件发生的时候取值，要这样  e.changedTouches[0].pageX  、e.changedTouches[0].pageY;

他们之间虽然差别很小，但是就这一点会有很多问题噢。

3.  使用touchend等事件，点击mask(遮罩层)会点穿到下面

这个是我前阵子做一个功能时候遇见问题折腾了许久，陷在里面大bug！！！！！

具体情况如标题所说，在手机上使用手机事件，在遮罩层上点击的话，会点击到下面的标签上，如果是a标签的话，会跳转等。

所以如果非要用手机事件的话，可以类似这样写。

document.body.addEventListener('touchstart', function(e) {

if (e.target.className === 'mask') {  //如果点上的是遮罩层的话，执行遮罩层消失的动作，然后在全局（注意是全局，因为绑在了body上），阻止默认事件。

isClose();

e.preventDefault();

}

}, false);

可悲的是，我遇见一个更恶心的，这样做了以后竟然不起效！！！！

折腾很久后发现，下面的是个iframe标签，穿透点击它，会打开一个对话框。

好吧，只能隐藏了（在它上面再放一个iframe也不行的）。解决了，舒心了

4.  手机上对body或者document.documentElement绑定click事件，无效

如果是点在一个遮罩层（mask）上，没内容。你会发现，你怎么点都不起任何效应，直接无视。但是你对一个个标签绑定事件以后，给mask的事件就只写个绑定的，然后不做任何实际的事，就写个console.log('aa');，你就会发现特么又能用了。

此外，对待此类问题的最好办法，是用上面的touch事件，结合preventDefault()来用，因为我讨厌hack。

5.  默认隐藏掉地址栏

window.scrollTo(0,1)这样触发滚动一个像素 就可以隐藏地址栏了

addEventListener('load', function () {

var hideUrlBar = function () {

window.scrollTo(0, 1);

};

setTimeout(hideUrlBar, 0);

}, false);

6.  避免忘记的属性值

window.innerHeight  指的是荧幕当前实际能显示的高度

window.pageYOffset  类似scrollTop的效果

7.  android上面input的bug

在android上，当输入的元素被点击，唤起键盘后，会发现有一个假的输入元素在周围，飘着，很影响。

有一个比较可行的办法是

如果你这个元素id为user的话，那么那个元素的id名会是这样     ＃fake-user  ，多了一个fake-

这样你在css对这个元素设置一些样式，看起来和你那个元素比较一致就不影响美观了

8.  flash在android上面超级牛逼，盖住一切东西

嘗試過的辦法：

1.普通修改wmode屬性值的辦法

2.把flash這個元素放到iframe裏面，調整自身或者遮住的物件的index值

3.把flash這個元素放到iframe裏面，并再插入一個iframe，讓其絕對定位，蓋到flash上面，調整index值

4.把被遮物件放入iframe中，調整index

好吧，如果你有什么高招，求介绍！！！！

据说在原生2.3上是不带flash的（但是能安装）

9.  如何针对手机横屏竖屏写样式？

这样是针对iphone竖屏的时候，最大宽度为320px的样式

@media screen and (max-width: 320px)

{
    h1 span:nth-child(1) { display: inline; }

}

这个是针对iphone横屏的时候，最小宽度为321px的样式

@media screen and (min-width: 321px)

{
    h1 span:nth-child(2) { display: inline; }

}

详细介绍：移步http://www.thecssninja.com/css/iphone-orientation-css

10.  pointer-events

pointer-events主要有auto和none两个值。主要用来使想点击的具有点击的功能，不想点击的使它无效（也就是下面文章所说点击范围最大化）。

http://www.qianduan.net/css3-pointer-event-description.html

11.  防止拨号,防止发邮件

一般来说，手机浏览器上点击一串数字时候，会识别为手机号码，拨出去，避免这种麻烦，添加这个meta标签即可，，避免发邮件也类似

12.  关闭input自动首字母大写

input元素新增了autocapitalize这个属性，通过指定autocapitalize='off'可以关闭键盘默认首字母大写。

13. 利用window的history对象，模拟返回前一个页面

window.history.go(-1);window.history.back();

群里经验总结：

1.移动web开发需要多少版本？

在国内做移动web的话，一般需要做几套输出 wap(诺基亚机器) ，ucweb 7.9以下(no js)， android的个别特效开发，apple的i系列的丰富应用

2.手机不支持的css属性

position:fixed;  (需要用js来模拟)

据其他人测试说： iTouch iPhone iPad Android 2.2  2.3都不支持overflow:scroll;  IOS5支持这个属性了。

 青春就应该这样绽放  游戏测试：三国时期谁是你最好的兄弟！！  你不得不信的星座秘密