1. viewport

viewport：除去所有工具欄、狀態(tài)欄、滾動(dòng)條等之后用于查看網(wǎng)頁的區(qū)域，打個(gè)比方，現(xiàn)在有一張報(bào)紙擺在你面前，但是這張報(bào)紙被一本書壓住了，所以你只能看到報(bào)紙的一部分，這部分可以查看到的區(qū)域就是可視區(qū)域，這就是viewport。

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

1	//設(shè)置可視區(qū)域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，默認(rèn)為980 像素）

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

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

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

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

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

在HTML代碼中，通過<meta>進(jìn)行控制。

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

2	//指定的iphone中safari頂端的狀態(tài)條的樣式

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

4	//告訴設(shè)備忽略將頁面中的數(shù)字識(shí)別為電話號(hào)碼</pre>

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

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

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

8	//保存到主屏默認(rèn)的標(biāo)題

9	<meta name="apple-mobile-web-app-title" content="標(biāo)題">

一旦設(shè)置了，在設(shè)計(jì)的時(shí)候就可以1:1的方式來設(shè)計(jì)頁面了，不會(huì)有滾動(dòng)條。

2. 創(chuàng)建桌面圖標(biāo)和啟動(dòng)畫面

蘋果ios 系統(tǒng)從4.2開始就支持apple-touch-icon屬性,在meta標(biāo)簽中指定它的值可以使得你的網(wǎng)頁在保存至主屏?xí)r，顯示為自定義的icon，而不是網(wǎng)頁的縮略圖。

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這個(gè)屬性，為了方便適應(yīng)多設(shè)備。而如果你不指定這個(gè)屬性，默認(rèn)size 會(huì)是57 * 57大小。另外對應(yīng) apple-touch-icon 蘋果還有另外一個(gè)屬性 apple-touch-icon-precomposed 他們的不同之處就是，但使用 apple-touch-icon-precomposed 屬性的時(shí)候，蘋果不會(huì)給桌面圖標(biāo)加一個(gè)高光效果。

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

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. 橫屏和豎屏樣式設(shè)置

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	//豎屏?xí)r使用的樣式

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

05	#landscape { display: none; }

06

</style>

07	//橫屏?xí)r使用的樣式

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

09	#portrait { display: none; }

10

</style>

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

手機(jī)查看模式一般有兩種，a.肖像模式 b.橫屏模式，在webkit內(nèi)核瀏覽器中，我們可以通過事件來監(jiān)聽手機(jī)是否改變了查看模式。在腳本中可以通過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

});

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

5.觸摸事件

當(dāng)用戶手指放在屏幕上面時(shí)，在屏幕上滑動(dòng)時(shí)或從屏幕上移開時(shí)會(huì)觸發(fā)一些相關(guān)事件，這類事件稱之為觸摸事件，有以下幾個(gè)：

1	touchstart //當(dāng)手指觸摸屏幕時(shí)觸發(fā)，即使已經(jīng)有一個(gè)手指放在了屏幕上也會(huì)觸發(fā)

2	touchmove //當(dāng)手指在屏幕上滑動(dòng)時(shí)連續(xù)的觸發(fā)

3	touchend //當(dāng)手指從屏幕上移開時(shí)觸發(fā)

4	touchcancel //當(dāng)系統(tǒng)停止跟蹤觸發(fā)是觸發(fā)，關(guān)于此類事件的確切觸發(fā)時(shí)間，文檔中沒有明確說明

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

1	touches // 表示當(dāng)前跟蹤的觸摸操作的Touch對象的數(shù)組

2	targetTouches // 特定與事件目標(biāo)的Touch對象的數(shù)組

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

每個(gè)觸摸對象包含下列屬性：

1	clientX // 觸摸目標(biāo)在視口中的X坐標(biāo)

2	clientY // ~Y坐標(biāo)

3	identifier // 標(biāo)識(shí)觸摸唯一ID

4	pageX // 觸摸目標(biāo)在頁面中的X坐標(biāo)

5	pageY //~Y坐標(biāo)

6	screenX //觸摸目標(biāo)在屏幕中的X坐標(biāo)

7	screenY // ~Y坐標(biāo)

8	target //觸摸的DOM節(jié)點(diǎn)目標(biāo)

關(guān)于觸摸目標(biāo)可以看看這個(gè)http://classjs.com/demo/phone/03/touchdetail.html,對了別忘了在手機(jī)端的webkit核心的瀏覽器里查看。

6. 去除鏈接的點(diǎn)擊陰影

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

7. 盡量棄用click

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

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

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

9. css3動(dòng)畫閃爍問題

關(guān)于使用css3動(dòng)畫的時(shí)盡量利用3D加速，從而使得動(dòng)畫變得流暢。動(dòng)畫過程中的動(dòng)畫閃白可以通過backface-visibility 隱藏。

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

2	-webkit-backface-visibility: hidden;

10. 如何檢測用戶是否從主屏啟動(dòng)webapp

iOS中瀏覽器直接訪問站點(diǎn)時(shí)，navigator.standalone屬性為false，從主屏啟動(dòng)webapp時(shí)，navigator.standalone屬性為true。

11. 關(guān)閉鍵盤大小寫

移動(dòng)版本webkit為input元素提供了autocapitalize屬性，通過指定autocapitalize=”off”來關(guān)閉鍵盤默認(rèn)首字母大寫。

12. 獲取滾動(dòng)條的值

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

13. 動(dòng)畫方式隱藏頭部地址欄

在Android和ios下都起作用

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

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

3	}, false);

轉(zhuǎn)載于:https://www.cnblogs.com/webu/archive/2013/05/20/3088349.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。