一、情况描述
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等等,这些是做不完的工作,因为屏幕太多,这是行不通的方法。