1. viewport

viewport：除去所有工具欄、狀態欄、滾動條等之后用于查看網頁的區域，打個比方，現在有一張報紙擺在你面前，但是這張報紙被一本書壓住了，所以你只能看到報紙的一部分，這部分可以查看到的區域就是可視區域，這就是viewport。

在進行webapp開發時，允許你更改這個viewport，你可以讓你的頁面寬高恰好等于瀏覽器的viewport，這樣你進行的設計就可以轉化成1:1了。
下邊就從它的屬性開始講起：

1	//設置可視區域viewport的寬高和比例

2	<meta name="viewport" content="width=device-width, initial-scale=1;maximum-scale=1.0; user-scalable=no;"/>

3	width - // viewport 的寬度 （范圍從200 到10,000，默認為980 像素）

4	height - // viewport 的高度 （范圍從223 到10,000）

5	initial-scale - // 初始的縮放比例 （范圍從>0 到10）

6	minimum-scale - // 允許用戶縮放到的最小比例

7	maximum-scale - // 允許用戶縮放到的最大比例

8	user-scalable - // 用戶是否可以手動縮 (no,yes)

在HTML代碼中，通過<meta>進行控制。

1	<meta charset="utf-8" />//編碼

2	//指定的iphone中safari頂端的狀態條的樣式

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

4	//告訴設備忽略將頁面中的數字識別為電話號碼</pre>

5	<meta content="telephone=no" name="format-detection" />

6	//隱藏地址欄（只有從主屏幕打開時生效）

7	<meta name="apple-mobile-web-app-capable" content="yes">

8	//保存到主屏默認的標題

9	<meta name="apple-mobile-web-app-title" content="標題">

一旦設置了，在設計的時候就可以1:1的方式來設計頁面了，不會有滾動條。

2. 創建桌面圖標和啟動畫面

蘋果ios 系統從4.2開始就支持apple-touch-icon屬性,在meta標簽中指定它的值可以使得你的網頁在保存至主屏時，顯示為自定義的icon，而不是網頁的縮略圖。

1	<link rel="apple-touch-icon" href="/custom_icon.png"/>

2	<link rel="apple-touch-icon" href="touch-icon-iphone.png" />

3	<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />

4	<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

蘋果提供了sizes這個屬性，為了方便適應多設備。而如果你不指定這個屬性，默認size 會是57 * 57大小。另外對應 apple-touch-icon 蘋果還有另外一個屬性 apple-touch-icon-precomposed 他們的不同之處就是，但使用 apple-touch-icon-precomposed 屬性的時候，蘋果不會給桌面圖標加一個高光效果。

蘋果系統3.0以后就支持 Startup Image 屬性，webapp 在蘋果手機上可以給網頁聲明StartUp Image ，使得當webapp 從主屏打開時，會有一張封面圖片，很類似原生app。但是被聲明的圖片對于iphone和itouch 大小只能是 320 x 460 ，其他大小的都無效。但是同樣你可以通過sizes 來進行多設備適配。

1	<link rel="apple-touch-startup-image" href="/startup.png">

2	//for iphone Retina Display high

3	<link rel="apple-touch-startup-image" sizes="640x960" href="img/splash-screen-640x960.png" />

4	//for iPad Landscape

5	<link rel="apple-touch-startup-image" sizes="1024x748" href="img/splash-screen-1024x748.png" />

6	//for iPad Portrait

7	<link rel="apple-touch-startup-image" sizes="768x1004" href="img/splash-screen-768x1004.png" />

3. 橫屏和豎屏樣式設置

01	<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> // 肖像模式樣式

02	<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" // 橫屏模式下的樣式

03	//豎屏時使用的樣式

04	<style media="all and (orientation:portrait)" type="text/css">

05	#landscape { display: none; }

06

</style>

07	//橫屏時使用的樣式

08	<style media="all and (orientation:landscape)" type="text/css">

09	#portrait { display: none; }

10

</style>

4.腳本監聽方向變化(orientationchange)

手機查看模式一般有兩種，a.肖像模式 b.橫屏模式，在webkit內核瀏覽器中，我們可以通過事件來監聽手機是否改變了查看模式。在腳本中可以通過window.orientation訪問。

1	EventUtil.addHandler( window, 'load', function( event ) {

2	var div = document.createElement('myDiv');

3	div.innerHTML = 'Current orentation is' + window.orientation;

4	document.body.appendChild( div );

5	EventUtil.addHandler( window, 'orientationchange', function( event ) {

6	div.innerHTML = 'Current orentation is' + window.orientation;

7

});

8

});

在你的手機端訪問http://classjs.com/demo/phone/03/orient.html，切換兩種方式來查看該網頁，試試效果吧。
是不是很奇妙，肖像模式為：0，橫向模式為：90，好了就到這里了，洗洗腦袋，充分發揮你的創意吧。

5.觸摸事件

當用戶手指放在屏幕上面時，在屏幕上滑動時或從屏幕上移開時會觸發一些相關事件，這類事件稱之為觸摸事件，有以下幾個：

1	touchstart //當手指觸摸屏幕時觸發，即使已經有一個手指放在了屏幕上也會觸發

2	touchmove //當手指在屏幕上滑動時連續的觸發

3	touchend //當手指從屏幕上移開時觸發

4	touchcancel //當系統停止跟蹤觸發是觸發，關于此類事件的確切觸發時間，文檔中沒有明確說明

上面這幾個事件都會冒泡，也都可以取消，每個觸摸事件的event對象都提供了在鼠標事件中常見的屬 性：bubbles,cancelable,view,clientX,clientY,screenX,screenY,detail,altKey,ctrlKey,shiftKey,metaKey
除了常見的DOM屬性外，觸摸時間還包含下列3個用于跟蹤觸摸屬性：

1	touches // 表示當前跟蹤的觸摸操作的Touch對象的數組

2	targetTouches // 特定與事件目標的Touch對象的數組

3	changeTouches // 表示自上次觸摸以來發生了什么改變的Touch對象的數組

每個觸摸對象包含下列屬性：

1	clientX // 觸摸目標在視口中的X坐標

2	clientY // ~Y坐標

3	identifier // 標識觸摸唯一ID

4	pageX // 觸摸目標在頁面中的X坐標

5	pageY //~Y坐標

6	screenX //觸摸目標在屏幕中的X坐標

7	screenY // ~Y坐標

8	target //觸摸的DOM節點目標

關于觸摸目標可以看看這個http://classjs.com/demo/phone/03/touchdetail.html,對了別忘了在手機端的webkit核心的瀏覽器里查看。

6. 去除鏈接的點擊陰影

1	html,body{-webkit-tap-highlight-color:rgba(0,0,0,0)}

7. 盡量棄用click

在手機上綁定click 事件，會使得操作有300ms 的延遲，體驗并不是很好。在用js綁定click的時候盡量用tap事件代替，可以采用第三方的觸摸庫來解決。

8. css盡量少用position的絕對和相對定位

對于渲染，過多絕對定位或是相對定位的元素，會使得你的瀏覽器不堪重負而崩潰。這點在mobile safari 上體現的很明顯。所以也盡量少使用絕對定位來完成布局

9. css3動畫閃爍問題

關于使用css3動畫的時盡量利用3D加速，從而使得動畫變得流暢。動畫過程中的動畫閃白可以通過backface-visibility 隱藏。

1	-webkit-transform-style: preserve-3d;

2	-webkit-backface-visibility: hidden;

10. 如何檢測用戶是否從主屏啟動webapp

iOS中瀏覽器直接訪問站點時，navigator.standalone屬性為false，從主屏啟動webapp時，navigator.standalone屬性為true。

11. 關閉鍵盤大小寫

移動版本webkit為input元素提供了autocapitalize屬性，通過指定autocapitalize=”off”來關閉鍵盤默認首字母大寫。

12. 獲取滾動條的值

在android中可以通過正常的document.documentElement.scrollTop和scrollLeft獲取到滾動條的值，但是在ios中沒有滾動條的概念，如果非要獲取則使用window.scrollY和scrollX。

13. 動畫方式隱藏頭部地址欄

在Android和ios下都起作用

1	document.addEventListener('DOMContentLoaded', function() {

2	setTimeout(function(){window.scrollTo(0, 1);}, 100);

3	}, false);

轉載于:https://www.cnblogs.com/webu/archive/2013/05/20/3088349.html

總結

以上是生活随笔為你收集整理的移动端开发小结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。