三个月移动版兼容总结

移动版兼容总结

一、情况描述

1、两种自适应：

（1）网页宽高固定；

（2）网页宽固定高不固定；

二、网页宽高固定就是校霸擂台的基本框架；在兼容过程当中出现问题：

1、iphone 和 android两大阵营对 viewport的支持程度不一样

android 能识别：target-densitydpi  但是iphone不能；

Iphone能识别： device-width 但是android不能，

也就是说 解决iphone的自适应屏幕问题要在 device-width 上下功夫；

而android就是 target-desitydpi;上下功夫了。

其中：

设备真实width * dpi = 浏览器width，这里的三个变量，设备真实width是个我们不能操作的已知值，另外两个变量我们可以设置一个来影响另一个，在ios中，我们能改的是浏览器width，dpi自动生成，而在android中，我们能改的是dpi，浏览器width自动生成。对于android，无论我们如何设置width，也不会对浏览器width产生影响

 target-desitydp的值分：

Low-dpi ，   Medium-dpi，    High-dpi ，  Super high-dpi ，  

可查阅：http://my.oschina.net/jqmobi/blog/60897

默认选择的是 medium-dpi；

Android 获取屏幕尺寸与密度：http://blog.csdn.net/ithomer/article/details/6688883

开发过程中结合了：initial-scale （最初大小）minimum-scale（最小缩放）maximum-scale（最大缩放）来调试；

2、同样是android手机可能浏览器不一样，也就对网页的解析不一样；

小米和魅族手机就是特例  可弹窗测试，小米弹窗出来竟然是iphone 的浏览器，可能和他可以修改的浏览器有关。（小米的浏览器可以修改成默认或者是iphone 或者是ipad）

 var ua = navigator.userAgent.toLowerCase();

var isios = ua.indexOf('iphone') > -1;//iphone  

var ua_1 = ua.indexOf('u;') > -1;//小米  ，android手机上都会有这个 

var index=ua.indexOf('android');//所以android手机上也都有这个

问题:有些功能是要用来判断是否是android或者是iphone的 ，小米和魅族的出现就难判断，。这个解决方案能让写给android的代码更好的应用

3、不同版本的android对也会有差异；

if(index>=0){ 

var androidVersion = parseFloat(ua.slice(index+8));//版本查询   

}

目前没找到解决方案、    

三、网页宽高不固定就是大部分自适应网页基本框架；

像boostrap这些都有相应的源码可以看。基本上是通过media 媒体查询就能搞定

 

四、 移动端优化部分；

1.Ontouchstart与onclick 事件的优化

   （1）在标签中，同时写入ontouchstart和onclick，手机端能优先识别ontouchstart事件。

   （2）如果是jq绑定的时间可以先判断：

var clickEventType=((document.ontouchstart!==null)?'click':'touchstart');

       unbind('clicktouchstart').removeAttr('onclickontouchstart').bind(

clickEventType,function() {}）;

   (3)有些地方太快 用 settimeout（）来减速，以免过快触发到第二个元素。

五、问题解决方式

1、屏幕大小不适应 ：在adaptUILayout.adapt(X); //适配当前页面x表示网页本身大小，

插件地址：http://www.cnblogs.com/plums/archive/2013/01/10/WebApp-fixed-width-layout-of-multi-terminal-adapter-since.html

优点：基本上手机都能适应，

缺点：通过这个只能让网页的宽度自适应 但是高度却不能，为了让网页长宽都自适应（所有问题都是因为这点）

本次解决方案：通过设置相应的X（已经不是网页本身的大小，基本上都是比原来网页的x要大），然后再去设置html的css3 的transform  ：scale（x,y）；来调节相适应的的屏幕，

最后效果：能大部分机器适应，但是不免出现一些拉伸现象（因为不是每台机器的比例都一样）；

2、不能检测旋转，强制旋转：通过

Html{ 

 -webkit-transform: rotate(90deg) scale(0.95,0.89);

transform: rotate(90deg) scale(0.95,0.89);

}(注意：body和html一个旋转就好了、)

来强制旋转。

优点：没有；

缺点：会出现莫名其妙的空间，（给html上黑色后还是会有些地方是白色，不知道这些空间属于什么的。）还要通过  margin来调整这个文档的适当位置，

或者通过 transform-origin: 45% 56%;-webkit-transform-origin: 44% 57%;来调整，这个真心不靠谱。根本不知道怎么调。。。我都是用margin.调

3、css3.0圆角border-radius 不兼容问题；

在部分机器中会出现这个问题即部分手机显示还是直角。

解决方案：好像听大师说是cpu的渲染问题，目前尚未解决；

4、强制性旋转后html后，div的css3.0的旋转属性不能用，android2.3左右的低端机器会有（模 拟器有）但是不知道真机有没有，没真机 测试不了。但是应该也是不行、通过检测到android的版本来禁止使用该属性 ，

出现地方：打完后抽卡，打完后弹出对话框（其中的星星是使用到旋转的属性的），魔法社抽奖；

效果：没有了旋转动画效果；

5、使用touchstart来触发事件的时候 ，不存在touchstart();也就是说 bind(‘touchstart’,function(){})能成功。但是（‘’）.touchstart();不存在，

出现的地方：背包和商店初始化的时候 没数据；

解决方案：使用trigger（’touchstart‘）事件

 

最后总结：由于没有更长的时间去测试 很多问题都是偶然被解决，有些方案不敢说他是答案，所以还要多测试。回头看看总觉得android机上的兼容问题好像全部出现在 dpi上，他能改变浏览器的width,而刚刚好 自适应和width 有密切关系，在开发过程当中 我通过判断手机屏幕大小来设置不同的元素位置css等等，这些是做不完的工作，因为屏幕太多，这是行不通的方法。