移动版兼容总结

一、情况描述

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，Superhigh-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）

varua=navigator.userAgent.toLowerCase();

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

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

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

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

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

if(index>=0){

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

}

目前没找到解决方案、

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

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

四、移动端优化部分；

1.Ontouchstart与onclick事件的优化

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

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

varclickEventType=((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等等，这些是做不完的工作，因为屏幕太多，这是行不通的方法。

三个月移动版兼容总结

移动版兼容总结

更多相关文章

随机推荐