移動平臺前端開發總結（ios，Android）

首先咱們來看看webkit內核中的一些私有的meta標籤，這些meta標籤在開發webapp時起到很是重要的做用

<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" name="viewport" /> 強制讓文檔的寬度與設備的寬度保持1:1，而且文檔最大的寬度比例是1.0，且不容許用戶點擊屏幕放大瀏覽；尤爲要注意的是content裏多個屬性的設置必定要用分號+空格來隔開，若是不規範將不會起做用。

<meta content="yes" name="apple-mobile-web-app-capable" /> iphone設備中的safari私有meta標籤，它表示：容許全屏模式瀏覽

<meta content="black" name="apple-mobile-web-app-status-bar-style" /> iphone的私有標籤，它指定的iphone中safari頂端的狀態條的樣式 <meta content="telephone=no" name="format-detection" /> 告訴設備忽略將頁面中的數字識別爲電話號碼

 

1. h5頁面有個很蛋疼的問題就是，當輸入框在最底部，點擊軟鍵盤後輸入框會被遮擋。

//可採用以下方式解決

var oHeight = $(document).height(); //瀏覽器當前的高度

$(window).resize(function(){

　　if($(document).height() < oHeight){ $("#footer").css("position","static"); }else{ $("#footer").css("position","absolute"); }

});

2. input 的placeholder會出現文本位置偏上的狀況：

　　PC端設置line-height等於height可以對齊，而移動端仍然是偏上，解決是設置line-height：normal;

3. 在移動端修改難看的點擊的高亮效果，iOS和安卓下都有效：

　　*{-webkit-tap-highlight-color:rgba(0,0,0,0);}

 

4. Zepto點透的解決方案

(1)引入fastclick.js，在頁面中加入以下js代碼

　　window.addEventListener( "load", function() { FastClick.attach( document.body ); }, false );

5. 上下拉動滾動條時卡頓、慢

　　body { -webkit-overflow-scrolling:touch; overflow-scrolling: touch; }

 

6.禁止複製、選中文本

　　Element { -webkit-user-select:none; -moz-user-select:none; -khtml-user-select:none; user-select:none; }

7. iphone及ipad下輸入框默認內陰影

　　Element{ -webkit-appearance:none; }

8. ios和android下觸摸元素時出現半透明灰色遮罩

　　Element { -webkit-tap-highlight-color:rgba(255,255,255,0) }

9. 圓角bug

某些Android手機圓角失效
解決方案：background-clip: padding-box;

10.頂部狀態欄背景色

<meta name="apple-mobile-web-app-status-bar-style"content="black"/>

11.桌面圖標

<link rel="apple-touch-icon"href="touch-icon-iphone.png"/> <link rel="apple-touch-icon"sizes="76x76"href="touch-icon-ipad.png"/> <link rel="apple-touch-icon"sizes="120x120"href="touch-icon-iphone-retina.png"/> <link rel="apple-touch-icon"sizes="152x152"href="touch-icon-ipad-retina.png"/>

12.移動端 HTML5 audio autoplay 失效問題

 document.addEventListener('touchstart',function() { document.getElementsByTagName('audio')[0].play(); document.getElementsByTagName('audio')[0].pause(); });

13.js處理img標籤加載圖片失敗，顯示默認圖片

　　若是img標籤是少許的話，能夠用這個： img的onerror事件

　　<img src='test.jpg' alt='test' onerror="this.src='default.jpg'">

14.CSS 強制不換行，多出的文字顯示省略號

{ white-space: nowrap; //文本強制不換行； text-overflow:ellipsis; //文本溢出顯示省略號； overflow:hidden; //溢出的部分隱藏； }