三個月移動版兼容總結

移動版兼容總結

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等等，這些是作不完的工做，由於屏幕太多，這是行不通的方法。