首页 > 代码库 > 手机兼容集锦

手机兼容集锦

jqm点击一次触发多次事件

jQuery Mobile会增强我们原始的HTML页面,为此它有自己一些特性。你的html页面没有遵循这个特性导致你的JS脚本执行了多次。这样改造
1、用下面的代码将你认为的一个页面包裹起来
<div data-role="page"></div>
2、将你的JS放在上面的div之中。
这样Jquerympbile就不会将你的JS执行两次了。

-------------------------------------------------------------

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标签即可,<meta content="telephone=no" name="format-detection" />,避免发邮件也类似<meta content="email=no" name="format-detection" />


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支持这个属性了。
手机IOS设备css兼容集
根据我做手机项目一年左右的经验来看,苹果系列产品(iphone,ipad)对css3这块支持的是最好的,不像android报的bug非常多,而且比较莫名其妙,所以就有了i系列富应用,android系列基本应用这么一说。但是苹果它肯定也有它自身的一些兼容问题,需要我们去注意,下面我做一些自己的总结,会不断更新。
一、textarea这个标签,具有默认样式
-webkit-appearance: none;   通过这个属性可以取消


二、label的for属性不起作用了
具体是这样,一般我们都对label设置for属性,它指向一个id,然后一点label的时候,对应到相关设置了id的input之类的标签上,以提高用户体验,但是我最近做东西发现,iphone上不支持这个属性,不管是4还是5。
以前做过类似的东西,没有发现这个问题,而且现在代码和以前一模一样,for可以顶用的,好好的啊?!后来才发现是因为原来那个label上面已经绑定过onclick事件了,所以正好触发了,就没出现这个bug,下面说下解决办法。
<label for="test" onclick=""><input type="checkbox" id="test"/>test</label>
要像这样给label加一个空的onclick事件就好了。




三. 使用translate相关属性,safari会闪烁(群里)
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
http://stackoverflow.com/questions/3461441/prevent-flicker-on-webkit-transition-of-webkit-transform

手机兼容集锦