首先我們來看看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; //溢出的部分隱藏； }