三个月移动版兼容总结

移动版兼容总结

1、状况描述

1、两种自适应：

（1）网页宽高固定；

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

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));//版本查询   

}

目前没找到解决方案、    

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

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

 

4、 移动端优化部分；

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（）来减速，以避免过快触发到第二个元素。

5、问题解决方式

一、屏幕大小不适应 ：在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）；来调节相适应的的屏幕，

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

二、不能检测旋转，强制旋转：经过

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.调

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

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

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

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

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

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

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

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

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

 

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