【WebApp】webApp開發總結（集合轉貼）
【來源地址】javascript
http://www.cnblogs.com/pifoo/archive/2011/05/28/webkit-webapp.htmlcss
http://classjs.com/tag/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%BC%80%E5%8F%91/html
1、移動WebApp簡單介紹
WebApp簡介
Web app是一種經過網絡（如互聯網或內聯網）訪問的應用程序；也能夠指計算機軟件承載在瀏覽器支持環境下或使用瀏覽器支持語言（如JavaScript）並依賴於web 瀏覽器來渲染的應用程序。Web app的流行歸功於網頁瀏覽器的普及，以及使用這一輕薄客戶端方便的用戶體驗。沒必要下載安裝就能夠實現更新和維護，具備支持跨平臺的內在屬性，是web app開始流行的關鍵緣由。典型的web app產品包括web郵箱、web商店、wikis等等。 android
WebApp的優勢
◆經過兼容性瀏覽器實現配置而不須要任何複雜的「轉出」步驟；
◆瀏覽器應用程序幾乎不須要客戶端上的磁盤空間；
◆新功能從服務器自動傳遞給用戶，用戶本身沒必要升級程序；
◆能夠輕鬆整合進入其餘服務類web程序；
◆跨平臺的兼容性 ios
WebApp開發細則
對於開發者或者設計者來講，一個好處是：移動開發就技術而言，不須要再花太多的額外時間精力去學習，全部須要去作的是就設計移動網頁來講，須要有全新的視覺去考慮問題。在本文中，將簡單介紹在移動Web開發中須要遵照的10條原則，開發者和設計師應該遵照這些原則，這樣開發出來的移動Web應用將有更好的效果。
css3
1 安裝統計分析程序
必須十分重視對訪問你的移動Web應用的用戶分析，這是首位的。能夠經過安裝各種第三方的移動Web應用統計系統達到這個目的。這樣的話，能夠經過查看統計程序中的各個部分得到對應的數據，好比得到訪問你的移動應用的用戶端的操做系統有哪些，而且能夠知道用戶是從哪些國家和地區訪問應用。還能夠經過統計程序，分析出用戶是經過搜索哪些關鍵字從而得知你的應用的。這些數據都將給你的移動Web應用的開發帶來不少幫助。
2 分析用戶的組成部分
移動用戶有着跟傳統的經過電腦訪問網站的用戶有着不少不一樣，他們有着千奇百怪的須要。所以在開發和設計移動Web應用時，必須置身處地以用戶的角度着想。若是你的應用的受衆是未成年人，他們永遠都是愛玩一族，所以設計移動Web應用都應該本着簡單的原則，能讓他們一邊開車，一邊購物都能很方便地操做你的應用。因此，要多分析訪問你的移動Web應用的用戶是由什麼樣的人羣組成。
3 優化圖片
在移動Web開發中，必須十分注意對圖片的優化，不然將會給你的應用帶來災難性後果，必須考慮以下因素：
一般來講，若是尺寸大的圖片加載將十分耗費時間，做爲開發者和設計者，必須看清醒認識到，移動用戶不少是使用低速的網絡去訪問你的應用的（不要老想着用戶使用3g,4g網絡！），因此能避免使用圖片的地方應該不使用圖片。
不一樣移動設備對圖片的分辨率等的自適應是個難題，所以必須在測試階段就要充分重視這個問題，作好測試工做。
所以，若是要在移動Web應用中使用圖片，還應該採起圖片壓縮，CSS優化等多種措施對圖片進行優化。
4 不要依賴JavaScript
不一樣的移動設備都有不一樣的瀏覽器，若是你開發的移動Web應用是面向絕大部分的移動設備的瀏覽器的話，則強烈建議不要依賴JavaScript。由於目前來講，儘管HTML 5已經開始使用，但仍是很多移動瀏覽器對JavaScript的支持不是太好，好比Opera mini等。但願這種狀況隨着之後由Apple,Android和Blackberry的改進而有所改變。
5 避免使用下拉菜單
當設計移動Web應用時，必定要儘可能避免使用下拉菜單。雖然在桌面電腦應用中，下拉菜單是十分常見和好用的，但在移動應用中，則須要用戶不斷地移動，並且容易出錯。所以，若是能避免使用下拉菜單，仍是應該避免過多的下拉菜單，特別是當下拉菜單內容列表過多時，加載耗費很多時間，影響性能和用戶體驗。
6 優化JavaScript和CSS
正如前面提到的，儘可能少用JavaScript。但若是必定要使用的話，則必須使用一些優化工具去優化JavaScript和CSS,儘可能壓縮它們的大小，減小下載時間。如今網上已經有很多很好的工具能去實現優化JavaScript和CSS。
7 注意佈局
最近,咱們可能會發現,有很多移動網站都同時支持水平和垂直的佈局,也就是說,在同一個移動網站中,有可能同時看到垂直佈局和水平佈局的界面.這對於iPhone和Android等設備來講可能比較好辦,但對於其餘的智能設備來講卻不必定。在設計移動網站時，最好設計頁面爲單列的，由於這樣用戶就只須要在一個方向上進行移動瀏覽觀看，並且垂直方向是符合人的通常視覺的，若是水平界面和垂直界面混合使用的話，將增長用戶操做的難度。
8 充分利用手機的特性
在開發移動Web應用中，必須學習瞭解時下移動設備中有哪些最受人們歡迎的特性。開發者能夠將這些特性融合到移動Web應用中，將會爲應用增色很多。
9 提示用戶到傳統Web版本的網站
若是你的應用同時有移動web應用的版本和常規的web網站，那麼一個很好的作法是在移動web應用中，提醒用戶能夠到傳統的web版本的網站去得到更多的資訊。
10 提升應用的訪問速度 web
在開發移動Web網站或應用時，最重要考慮的其中一條就是速度，你的網站或應用必須速度足夠快，若是要達到這樣的目的，除了前文說的儘可能避免使用JavaScript和flash外，更重要的是要多關注功能和速度自己，儘可能減小華而不實的東西。 redux
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
2、Web App雜談和導讀
雜談：
導讀：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
3、Web App設計雜談
現階段web app還很難有一個設計原則
HTML5技術仍在發展中且發展尚不完善， web app做爲該技術的產物天然也是在不斷試驗中進步；此外，web app還要依賴兼容性瀏覽器更強大的渲染能力，俗話說「皮之不存毛將焉附」，在你們都期待的強大瀏覽器出現以前誰也難以預言web app須要作成什麼樣纔算是一個合格的產品。在這種行業背景下，web app還難以有一個所謂的設計原則，起碼如今還不構成總結一個合理設計原則的條件。
其實，所謂的設計原則本就是從已有的、典型的設計做品中倒推得出的。好比，解構主義設計風格的提出不是以前就有的，是理論家在分析總結了建築設計師蓋裏、埃森曼、特斯楚米等大師的典型設計做品，結合這幾位大師的設計理念後定義的一個流派名稱。所謂的解構主義設計原則也是從權威大師典型做品中概括總結的； 設計原則出現後繼而能夠對以後的設計起必定的指導做用。
所以本文不談所謂的web app設計原則，現從已經上線的優秀產品中選擇典型設計元素與你們討論分享，尋找能夠借鑑的地方，並藉此增進對web app產品設計的認識。
Web app界面設計的8個實用技巧
Web app用戶界面設計，核心是web設計；不過與通常意義上的web設計相比較，web app更加註重功能。爲了在與桌面應用程序的競爭中展示其優點，web app須要提供簡潔、直觀、快速響應的用戶界面，以便於用戶在任務操做中節省精力和時間。
1.界面元素隨需而變
力求簡潔明瞭是用戶界面設計的重要原則。在同一時間給用戶展現的功能越多，用戶須要尋找和思考的時間也就越多。一樣，界面中存在的選項越少，可用功能就越明顯、越容易瀏覽。不過簡化界面並不是垂手可得，尤爲是你不想減小應用程序功能的狀況下。
以Kontain搜索模塊爲例，在搜索框中有一個下拉菜單，幫助用戶細化搜索範圍。用戶能夠經過菜單選擇本身想要尋找的內容。該網站經過這些選項簡化了搜索框。
將高級功能隱藏起來是一種有效的簡化方法。搞清楚在界面中用戶最常常用的是哪些功能，而後把其餘功能隱藏處理。這些可由下拉式菜單和控件完成。例如，搜索欄中的高級過濾器能夠作成尾部的特殊下拉菜單樣式。當用戶須要這些過濾器的時候只須要幾回點擊就能夠使用。決定哪些功能保留展現哪些須要隱藏起來，並非一個簡單的工做，須要取決於功能控件的重要程度和被使用的頻繁程度。
擅長如此處理的還有CollabFinder， 如上圖。用戶點擊搜索連接後並無被立刻帶到其餘頁面；搜索框控件下拉下來，容許用戶在當前頁面內直接進行搜索操做。這樣的設計方式，既保持了用戶視覺焦點的穩定，又使得整個頁面在不使用某個特定功能的狀況下簡潔清爽。
2.爲模態窗口增長邊緣陰影
彈出式菜單和窗口周邊的陰影不只僅是爲了視覺美觀。陰影一方面增大了菜單或窗口的尺寸，有助於將菜單或窗口從背景中區別開來；另外一方面經過灰度化的邊緣陰影能夠屏蔽背景內容的噪音干擾。
這個技巧根植於傳統桌面程序，幫助用戶將注意力集中在彈出的窗口。因爲不少模態窗口不容易從桌面程序內容頁面中凸顯出來，陰影能夠使它們看起來具備立體效果、彷彿懸浮於其餘內容之上，因而拉近了模態窗口與用戶的距離。
如上圖，Digg的登陸窗口邊緣擁有厚厚的陰影，對下面內容的視覺噪音起到了有效的屏蔽做用。
爲實現這樣的效果，設計師每每將透明的PNG背景圖片做爲容器，再把內容填充到容器中，同時等距離填充彈出框各邊緣。或者使用具備透明邊框的背景圖片，並將內容框絕對定位在其中。另外，也能夠使用基於JavaScript的lightboxes命令或者CSS3中的 drop shadows命令，但須要注意瀏覽器是否支持。
3.空白狀態時告訴用戶能夠作什麼
當設計web app的時候，不只須要關心通常狀況下的信息展現，還要確保界面在空白狀態時表現良好、具備指引做用。頁面中尚未產生任何信息的時候，能夠在空白區域放置一條幫助信息告訴用戶如何開始。例如，一個項目管理的應用程序主頁會列出用戶的項目，假如尚未什麼項目信息，能夠爲用戶提供一個項目建立頁面的連接。即便這個頁面上已經存在了這樣一個功能按鈕，一個額外的幫助並不會有什麼妨礙。
如上圖，Campaign Monitor在右邊方向提供了一個創建新信息的快速入口。
Wufoo的表單頁面有醒目的、友好的信息鼓勵用戶去建立新的表單。
這個技巧能夠有效地鼓勵用戶試用該服務，並在註冊後當即進行使用。經過應用程序的單一操做步驟能夠幫助用戶理解這個應用的優點以及對他們是否有用。
此外，只爲用戶展現最重要的功能選項也很關鍵。一股腦的將衆多功能傾瀉給用戶並無什麼實際意義。須要牢記的是，用戶一般想從應用中得到或多或少的信息，但卻不想跳進細節中，用戶沒有時間也沒有興趣。
在空白狀態中激勵用戶，能夠顯著地下降用戶的流失率，並幫助潛在的用戶更好的理解程序系統是如何工做的。
4.Button狀態積極反饋
許多web app擁有自定義樣式的按鈕。默認的輸入按鈕可能不適合某些情景，文字連接有時候看起來又太含蓄。須要注意的是，把連接作成Button樣式的時候，它們就應該有button的表現形式。好比，在點擊button的時候它們應該會出現被「壓」過的樣子。這不只僅是純粹的視覺變化。及時反饋給用戶，能夠使web app感受起來更靈敏，與桌面應用程序的用戶體驗更接近。
能夠使用CSS添加按鈕的「pressed」等狀態，實如今不一樣狀態下顯示不一樣背景圖片的功能。
例如Highrise中的按鈕，在鼠標指針點擊的時候會呈現 「pressed」狀態效果，爲用戶提供了靈敏的反饋感覺。
5.使用上下文情境導航
在既定的情境下考慮用戶但願看什麼、須要什麼是很是重要的。不須要在每個地方都放置相同的導航控件，由於用戶不是在任何狀況下都須要它們。
上下文情境導航最好的一個例子就是Office 2007中，原先默認的工具欄集合被換成了帶狀控件形式。每一項tab控制着一組相關聯的功能，如編輯圖形、校對或者簡單書寫。
Web app能夠從這種上下文情境導航中獲益，僅展現用戶須要的、而不是全部可用的功能，從而保持用戶界面的整潔清爽。
例如上圖中，Lighthouse 有很是典型的tab導航菜單；然而，在tab導航欄的下方它還有二級導航，在這個二級導航中只顯示網站活躍部分的相關條目。
6.更加劇視關鍵功能
並非全部的控件都擁有相同的重要性。例如建立一個新的條目，頁面中會有「建立」「取消」兩個button. 這裏的「建立」就要更加劇要些，由於這是大多數狀況下用戶即將要作的事情。極少的狀況下用戶纔會去點擊取消。雖然這兩個控件並排放置，可是不要給予相同的重視程度。
爲了將注意力引導到「建立」上，咱們能夠嘗試使用不用的風格或樣式。一種方式是將「建立」設計成button樣式，「取消」設計成文字連接樣式。另外一種方式是在視覺上使用使用不一樣的顏色，並使button略有凸起的效果。這樣便於抓住用戶的目光。
例如在Google+建立新圈子的彈窗中，建立按鈕在視覺上具有了更加醒目的效果，擁有該頁面中更高的重視等級。
7.嵌入視頻
雖然圖片和文字是向用戶介紹應用程序功能的很好的方式，但若是資源容許的話，視頻將是一個更優方案。近年來視頻在網絡上的使用愈來愈頻繁。Web app的截屏視頻常常被使用在營銷網站中來展現產品的功能；然而這並非視頻使用的惟一方式。
GoodBarry 在其首頁中使用截屏視頻來展現產品。同時它還在應用中嵌入了視頻來指導用戶如何去開始。
MailChimp在管理面板中使用教程視頻以幫助新用戶。
一些web app使用內部嵌入的視頻幫助用戶瞭解產品的特定功能。視頻是快速演示產品如何使用的絕佳方法，由於與文字相比視頻更容易被用戶所接受，並且視頻能夠使用戶準確地看到須要作什麼，更加清晰。
8.讓升級或降級的提示簡潔、不擾民
在不少互聯網產品中都會有不一樣權限的用戶帳戶存在，好比郵箱、空間、網盤存儲、SNS產品等。在用戶擁有了一個帳戶後，他們能夠對帳戶進行升級或降級。如何設計界面來提示用戶他們能夠升級而不去幹擾用戶的工做流程呢？設計師確定不肯意在應用程序以外完成這件事情，這樣的提示應該是和app是無縫鏈接的，並且最好是讓用戶感受方便。所以升級帳戶的提示最好放在app內完成。
經過幾個例子咱們瞭解一下升級帳戶的處理方式。
FreshBooks 的升級提示是一直存在的，被放置在了web app的底部。如上圖。因爲提示是在界面的工做區之外的位置，並不會對用戶的工做流程形成影響。
在Basecamp的升級提示中，用戶能夠很清晰地得知升級後將會有哪些變化。請看上圖。
在CompVersions中,各類升級後的變化狀況很直觀 ，整個頁面簡潔清晰。請見上圖。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
4、webkit webApp的開發技巧
1. viewport：
也就是可視區域。對於桌面瀏覽器，咱們都很清楚viewport是什麼，就是出去了全部工具欄、狀態欄、滾動條等等以後用於看網頁的區域，
這是真正有效的區域。因爲移動設備屏幕寬度不一樣於傳統web,所以咱們須要改變viewport;
實際上咱們能夠操做的屬性有4 個：
width - // viewport 的寬度 （範圍從200 到10,000，默認爲980 像素） height - // viewport 的高度 （範圍從223 到10,000）
initial-scale - // 初始的縮放比例 （範圍從>0 到10）
minimum-scale - // 容許用戶縮放到的最小比例 maximum-scale - // 容許用戶縮放到的最大比例
user-scalable - // 用戶是否能夠手動縮 (no,yes) |
那麼到底這些設置如何讓Safari 知道？其實很簡單，就一個meta，形如：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> //編碼 <meta id="viewport" name="viewport" content="width=320; initial-scale=1.0;maximum-scale=1.0; user-scalable=no;"/> <meta name=」apple-mobile-web-app-capable」 content=」yes」 /> // 離線應用的另外一個技巧 <meta name=」apple-mobile-web-app-status-bar-style」 content=black」 /> // 隱藏狀態欄 <meta content="black" name="apple-mobile-web-app-status-bar-style" />//指定的iphone中safari頂端的狀態條的樣式 <meta content="telephone=no" name="format-detection" /> //告訴設備忽略將頁面中的數字識別爲電話號碼 <meta name="Author" contect="Mr.He"/ > |
在設置了initial-scale=1 以後，咱們終於能夠以1:1 的比例進行頁面設計了。關於viewport，還有一個很重要的概念是：iphone 的safari 瀏覽器徹底沒有滾動條，並且不是簡單的「隱藏滾動條」，是根本沒有這個功能。iphone 的safari 瀏覽器實際上從一開始就完整顯示了這個網頁，而後用viewport 查看其中的一部分。當你用手指拖動時，其實拖的不是頁面，而是viewport。瀏覽器行爲的改變不止是滾動條，交互事件也跟普通桌面不同。
2. link-橫屏和豎屏樣式設置:
<link rel=」apple-touch-startup-image」 href=」startup.png」 />// 設置開始頁面圖片 <link rel=」apple-touch-icon」 href=」iphon_tetris_icon.png」/>// 在設置書籤的時候能夠顯示好看的圖標 <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> // 肖像模式樣式 <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" // 風景模式樣式
//豎屏時使用的樣式 <style media="all and (orientation:portrait)" type="text/css"> #landscape { display: none; } </style>
//橫屏時使用的樣式 <style media="all and (orientation:landscape)" type="text/css"> #portrait { display: none; } </style> |
3. 事件 ：
// 手勢事件 touchstart //當手指接觸屏幕時觸發 touchmove //當已經接觸屏幕的手指開始移動後觸發 touchend //當手指離開屏幕時觸發 touchcancel
// 觸摸事件 gesturestart //當兩個手指接觸屏幕時觸發 gesturechange //當兩個手指接觸屏幕後開始移動時觸發 gestureend
// 屏幕旋轉事件 onorientationchange
// 檢測觸摸屏幕的手指什麼時候改變方向 orientationchange
// touch事件支持的相關屬性 touches targetTouches changedTouches clientX // X coordinate of touch relative to the viewport (excludes scroll offset) clientY // Y coordinate of touch relative to the viewport (excludes scroll offset) screenX // Relative to the screen screenY // Relative to the screen pageX // Relative to the full page (includes scrolling) pageY // Relative to the full page (includes scrolling) target // Node the touch event originated from identifier // An identifying number, unique to each touch event |
4. JS檢測屏幕旋轉事件：onorientationchange
添加屏幕旋轉事件偵聽，可隨時發現屏幕旋轉狀態（左旋、右旋仍是沒旋）。例子：
// 判斷屏幕是否旋轉 function orientationChange() { switch(window.orientation) { case 0: alert("肖像模式 0,screen-width: " + screen.width +"; screen-height:" + screen.height); break; case -90: alert("左旋 -90,screen-width: " + screen.width +"; screen-height:" + screen.height); break; case 90: alert("右旋 90,screen-width: " + screen.width +"; screen-height:" + screen.height); break; case 180: alert("風景模式 180,screen-width: " + screen.width +"; screen-height:" + screen.height); break; };<br>}; // 添加事件監聽 addEventListener('load',function(){ orientationChange(); window.onorientationchange = orientationChange; }); |
5. 隱藏地址欄 & 處理事件的時候，防止滾動條出現：
// 隱藏地址欄 & 處理事件的時候 ，防止滾動條出現 addEventListener('load',function(){ setTimeout(function(){ window.scrollTo(0, 1); }, 100); }); |
6. 雙手指滑動事件：
// 雙手指滑動事件 addEventListener('load', function(){ window.onmousewheel = twoFingerScroll;}, false // 兼容各瀏覽器，表示在冒泡階段調用事件處理程序 (true 捕獲階段) ); function twoFingerScroll(ev) { var delta =ev.wheelDelta/120; //對 delta 值進行判斷(好比正負) ，然後執行相應操做 return true; }; |
7. 判斷是否爲iPhone：
// 判斷是否爲 iPhone ： function isAppleMobile() { return (navigator.platform.indexOf('iPad') != -1); }; |
8. localStorage:
例子 ：（注意數據名稱 n 要用引號引發來）
var v = localStorage.getItem('n') ? localStorage.getItem('n') :""; // 若是名稱是 n 的數據存在 ，則將其讀出 ，賦予變量 v 。 localStorage.setItem('n', v); // 寫入名稱爲 n、值爲 v 的數據 localStorage.removeItem('n'); // 刪除名稱爲 n 的數據 |
9. 使用特殊連接（如直接撥號和發短信）：
若是你關閉自動識別後 ，又但願某些電話號碼可以連接到 iPhone 的撥號功能 ，那麼能夠經過這樣來聲明電話連接 ,
<a href="tel:12345654321">打電話給我</a> <a href="sms:12345654321">發短信</a> 或用於單元格： <td onclick="location.href='tel:122'"> |
10. 自動大寫與自動修正
要關閉這兩項功能，能夠經過autocapitalize 與autocorrect 這兩個選項：
<input type="text" autocapitalize="off" autocorrect="off" /> |
11. WebKit CSS:
①「盒模型」的具體描述性質的包圍盒塊內容，包括邊界，填充等等。
-webkit-border-bottom-left-radius: radius; -webkit-border-top-left-radius: horizontal_radius vertical_radius; -webkit-border-radius: radius; //容器圓角 -webkit-box-sizing: sizing_model; 邊框常量值：border-box/content-box -webkit-box-shadow: hoff voff blur color; //容器陰影（參數分別爲：水平X 方向偏移量；垂直Y 方向偏移量；高斯模糊半徑值；陰影顏色值） -webkit-margin-bottom-collapse: collapse_behavior; 常量值：collapse/discard/separate -webkit-margin-start: width; -webkit-padding-start: width; -webkit-border-image: url(borderimg.gif) 25 25 25 25 round/stretch round/stretch; -webkit-appearance: push-button; //內置的CSS 表現，暫時只支持push-button |
②「視覺格式化模型」描述性質，肯定了位置和大小的塊元素。
direction: rtl unicode-bidi: bidi-override; 常量：bidi-override/embed/normal |
③「視覺效果」描述屬性，調整的視覺效果塊內容，包括溢出行爲，調整行爲，能見度，動畫，變換，和過渡。
clip: rect(10px, 5px, 10px, 5px) resize: auto; 常量：auto/both/horizontal/none/vertical visibility: visible; 常量: collapse/hidden/visible -webkit-transition: opacity 1s linear; 動畫效果 ease/linear/ease-in/ease-out/ease-in-out -webkit-backface-visibility: visibler; 常量：visible(默認值)/hidden -webkit-box-reflect: right 1px; 鏡向反轉 -webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white)); -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));; //CSS 遮罩/蒙板效果 -webkit-mask-attachment: fixed; 常量：fixed/scroll -webkit-perspective: value; 常量：none(默認) -webkit-perspective-origin: left top; -webkit-transform: rotate(5deg); -webkit-transform-style: preserve-3d; 常量：flat/preserve-3d; (2D 與3D) |
④「生成的內容，自動編號，並列出」描述屬性，容許您更改內容的一個組成部分，建立自動編號的章節和標題，和操縱的風格清單的內容。
content: 「Item」 counter(section) 」 「; This resets the counter. First section >two section three section counter-increment: section 1; counter-reset: section; |
⑤「分頁媒體」描述性能與外觀的屬性，控制印刷版本的網頁，如分頁符的行爲。
page-break-after: auto; 常量：always/auto/avoid/left/right page-break-before: auto; 常量：always/auto/avoid/left/right page-break-inside: auto; 常量：auto/avoid |
⑥「顏色和背景」描述屬性控制背景下的塊級元素和顏色的文本內容的組成部分。
-webkit-background-clip: content; 常量：border/content/padding/text -webkit-background-origin: padding; 常量：border/content/padding/text -webkit-background-size: 55px; 常量：length/length_x/length_y |
⑦ 「字型」的具體描述性質的文字字體的選擇範圍內的一個因素。報告還描述屬性用於下載字體定義。
unicode-range: U+00-FF, U+980-9FF; |
⑧「文本」描述屬性的特定文字樣式，間距和自動滾屏。
text-shadow: #00FFFC 10px 10px 5px; text-transform: capitalize; 常量：capitalize/lowercase/none/uppercase word-wrap: break-word; 常量：break-word/normal -webkit-marquee: right large infinite normal 10s; 常量：direction(方向) increment(迭代次數) repetition(重複) style(樣式) speed(速度); -webkit-marquee-direction: ahead/auto/backwards/down/forwards/left/reverse/right/up -webkit-marquee-incrementt: 1-n/infinite(無窮次) -webkit-marquee-speed: fast/normal/slow -webkit-marquee-style: alternate/none/scroll/slide -webkit-text-fill-color: #ff6600; 常量：capitalize, lowercase, none, uppercase -webkit-text-security: circle; 常量：circle/disc/none/square -webkit-text-size-adjust: none; 常量:auto/none; -webkit-text-stroke: 15px #fff; -webkit-line-break: after-white-space; 常量：normal/after-white-space -webkit-appearance: caps-lock-indicator; -webkit-nbsp-mode: space; 常量： normal/space -webkit-rtl-ordering: logical; 常量：visual/logical -webkit-user-drag: element; 常量：element/auto/none -webkit-user-modify: read- only; 常量：read-write-plaintext-only/read-write/read-only -webkit-user-select: text; 常量：text/auto/none |
⑨「表格」描述的佈局和設計性能表的具體內容。
-webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px; -webkit-column-break-after: right; 常量：always/auto/avoid/left/right -webkit-column-break-before: right; 常量：always/auto/avoid/left/right –webkit-column-break-inside: logical; 常量：avoid/auto -webkit-column-count: 3; //分欄 -webkit-column-rule: 1px solid #fff; style:dashed,dotted,double,groove,hidden,inset,none,outset,ridge,solid |
⑩「用戶界面」描述屬性，涉及到用戶界面元素在瀏覽器中，如滾動文字區，滾動條，等等。報告還描述屬性，範圍之外的網頁內容，如光標的標註樣式和顯示當您按住觸摸觸摸
目標，如在iPhone上的連接。
-webkit-box-align:baseline,center,end,start,stretch 常量：baseline/center/end/start/stretch -webkit-box-direction:normal;常量：normal/reverse -webkit-box-flex: flex_valuet -webkit-box-flex-group: group_number -webkit-box-lines: multiple; 常量：multiple/single -webkit-box-ordinal-group: group_number -webkit-box-orient: block-axis; 常量：block-axis/horizontal/inline-axis/vertical/orientation –webkit-box-pack: alignment; 常量：center/end/justify/start |
12. 動畫過渡
這是 Webkit 中最具創新力的特性：使用過渡函數定義動畫。
-webkit-animation: title infinite ease-in-out3s; animation 有這幾個屬性： -webkit-animation-name： //屬性名，就是咱們定義的keyframes -webkit-animation-duration：3s //持續時間 -webkit-animation-timing-function： //過渡類型：ease/ linear(線性) /ease-in(慢到快)/ease-out(快到慢) /ease-in-out(慢到快再到慢) /cubic-bezier -webkit-animation-delay：10ms //動畫延遲(默認0) -webkit-animation-iteration-count： //循環次數(默認1)，infinite 爲無限 -webkit-animation-direction： //動畫方式：normal(默認 正向播放)； alternate(交替方向，第偶數次正向播放，第奇數次反向播放) |
這些一樣是能夠簡寫的。但真正讓我覺的很爽的是keyframes，它能定義一個動畫的轉變過程供調用，過程爲0%到100%或from(0%)到to(100%)。簡單點說，只要你有想法，你想讓元素在這個過程當中以什麼樣的方式改變都是很簡單的。
-webkit-transform: 類型（縮放scale/旋轉rotate/傾斜skew/位移translate） scale(num,num) 放大倍率。scaleX 和 scaleY(3)，能夠簡寫爲：scale(* , *) rotate(*deg) 轉動角度。rotateX 和 rotateY，能夠簡寫爲：rotate(* , *) Skew(*deg) 傾斜角度。skewX 和skewY，可簡寫爲：skew(* , *) translate(*,*) 座標移動。translateX 和translateY，可簡寫爲：translate(* , *)。 |
實現模擬彈出消息框（Alert）的例子：
①定義過渡（在<style type="text/css">段中描述keyframes）：
@-webkit-keyframes DivZoom { 0% { -webkit-transform: scale(0.01) } 60% { -webkit-transform: scale(1.05) } 80% { -webkit-transform: scale(0.95) } 100% { -webkit-transform: scale(1.00) } } .sZoom { -webkit-animation: DivZoom0.5s ease-in-out } |
（很容易看懂，將元素從縮小的0.01 倍--很小但不能爲0 倍，放大到1.05 倍，再縮小到0.95倍，最後到1 倍即正常大小。整個過渡過程事件爲0.5 秒，動畫方式爲ease-in-out，即慢到快再到慢，默認只進行1 次過渡。這正是你們常常看到的 iPhone 彈出的提示信息的動畫效果！）
②定義元素（在<body>段中）：
<div id="layerH" style="-webkit-border-radius:12px; border:2px solid #FFF;-webkit-box-shadow: 0px 2px 4px #888;position: absolute; left: 24px; top: 106px;<br>width: 256px; height: 268px; padding-left: 8px; padding-right: 8px;color: #FFFFFF; text-shadow: 1px 1px 1px #000; text-align: center;background-color: RGBA(32,48,96,0.9); background-image:url('BG-Msg.png'); background-repeat:no-repeat; z-index: 1; visibility: hidden; "> <p><span style="font-size: 16pt; font-weight: bold">使用說明</span></p> <hr noshadesize="1"> <div id="HelpText" style="height: 120px">說明文字</div> <hr noshadesize="1"> <form name="formV" method="POST"> <input type="button" value="確認" name="B1" style="width: 100%; height: 40px; font-size: 14pt; ont-weight: bold; color: #FFFFFF; text-shadow: 0px -1px 1px #000;" onclick=" layerH.style.visibility='hidden'"> </form> </div> |
③啓動動畫（在 javascript 定義的函數中）
function pHelp() { layerH.style.visibility ='visible' layerH.style.cssText ="-webkit-animation-delay: " + Math.random() +"ms" layerH.className ='sZoom' } |
(這個啓動函數就很好理解了。可是爲何要使用-webkit-animation-delay 這句呢？由於當一個元素過渡顯示完成後，若其樣式沒有變化，下一次將沒法進行過渡動畫顯示。咱們巧妙的利用其動畫延遲時間定義，使其有所變化，就避免了上述問題。其中使用隨機數函數Math.random()，產生一個大於0 小於1 的隨機數。固然，延遲零點幾毫秒，用戶是不會察覺的。)
13. 建立桌面圖標和啓動畫面
官方文檔參考: 蘋果ios 系統從4.2開始就支持apple-touch-icon屬性,在meta標籤中指定它的值能夠使得你的網頁在保存至主屏時，顯示爲自定義的icon，而不是網頁的縮略圖。
<link rel="apple-touch-icon" href="/custom_icon.png"/> <link rel="apple-touch-icon" href="touch-icon-iphone.png" /> <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" /> <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 來進行多設備適配。
<link rel="apple-touch-startup-image" href="/startup.png"> //for iphone Retina Display high <link rel="apple-touch-startup-image" sizes="640x960" href="img/splash-screen-640x960.png" /> //for iPad Landscape <link rel="apple-touch-startup-image" sizes="1024x748" href="img/splash-screen-1024x748.png" /> //for iPad Portrait <link rel="apple-touch-startup-image" sizes="768x1004" href="img/splash-screen-768x1004.png" />
14. 去除連接的點擊陰影
html,body{-webkit-tap-highlight-color:rgba(0,0,0,0)}
15. 儘可能棄用click
在手機上綁定click 事件，會使得操做有300ms 的延遲，體驗並非很好。在用js綁定click的時候儘可能用tap事件代替，能夠採用第三方的觸摸庫來解決。
16. css儘可能少用position的絕對和相對定位
對於渲染，過多絕對定位或是相對定位的元素，會使得你的瀏覽器不堪重負而崩潰。這點在mobile safari 上體現的很明顯。因此也儘可能少使用絕對定位來完成佈局
17. css3動畫閃爍問題
關於使用css3動畫的時儘可能利用3D加速，從而使得動畫變得流暢。動畫過程當中的動畫閃白能夠經過backface-visibility 隱藏。
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
18. 如何檢測用戶是否從主屏啓動webapp
iOS中瀏覽器直接訪問站點時，navigator.standalone屬性爲false，從主屏啓動webapp時，navigator.standalone屬性爲true。
19. 關閉鍵盤大小寫
移動版本webkit爲input元素提供了autocapitalize屬性，經過指定autocapitalize=」off」來關閉鍵盤默認首字母大寫。
20. 獲取滾動條的值
在android中能夠經過正常的document.documentElement.scrollTop和scrollLeft獲取到滾動條的值，可是在ios中沒有滾動條的概念，若是非要獲取則使用window.scrollY和scrollX。
21. 動畫方式隱藏頭部地址欄
在Android和ios下都起做用
document.addEventListener('DOMContentLoaded', function() {
setTimeout(function(){window.scrollTo(0, 1);}, 100);
}, false);
22.處理設備的橫豎屏
爲了應對移動設備屏幕的碎片化，咱們在開發Mobile Web應用時，一個最佳實踐就是採用流式佈局，保證最大可能地利用有限的屏幕空間。因爲屏幕存在着方向性，用戶在切換了屏幕的方向後，有些設計上或實現上的問題就會凸顯——咱們至少須要處理一下當前顯示元素的寬度的適配（固然，要作的可能不只僅是這個）。不少時候，咱們須要爲不一樣的屏幕方向來設計對應的應用顯示模式，這個時候，實時地獲知設備的模豎屏狀態就顯得極爲重要。
window.orientation屬性與onorientationchange事件
window.orientation :這個屬性給出了當前設備的屏幕方向，0表示豎屏，正負90表示橫屏（向左與向右）模式
onorientationchange : 在每次屏幕方向在橫豎屏間切換後，就會觸發這個window事件，用法與傳統的事件相似
1：使用onorientationchange事件的回調函數，來動態地爲body標籤添加一個叫orient的屬性，同時以body[orient=landspace]或body[orient=portrait]的方式在css中定義對應的樣式，這樣就能夠實如今不一樣的屏幕模式下顯示不一樣的樣式。以下代碼示例：
Html代碼
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title>橫豎屏切換檢測</title>
<style type="text/css">
body[orient=landscape]{
background-color: #ff0000;
}
body[orient=portrait]{
background-color: #00ffff;
}
</style>
</head>
<body orient="landspace">
<div>
內容
</div>
<script type="text/javascript">
(function(){
if(window.orient==0){
document.body.setAttribute("orient","portrait");
}else{
document.body.setAttribute("orient","landscape");
}
})();
window.onorientationchange=function(){
var body=document.body;
var viewport=document.getElementById("viewport");
if(body.getAttribute("orient")=="landscape"){
body.setAttribute("orient","portrait");
}else{
body.setAttribute("orient","landscape");
}
};
</script>
</body>
</html>
相似的思路，不經過CSS的屬性選擇器來實現，以下代碼的實現方案：
Html代碼
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title>橫豎屏切換檢測</title>
<style type="text/css">
.landscape body {
background-color: #ff0000;
}
.portrait body {
background-color: #00ffff;
}
</style>
</head>
<body orient="landspace">
<div>
內容
</div>
<script type="text/javascript">
(function(){
var init=function(){
var updateOrientation=function(){
var orientation=window.orientation;
switch(orientation){
case 90:
case -90:
orientation="landscape";
break;
default:
orientation="portrait";
break;
}
document.body.parentNode.setAttribute("class",orientation);
};
window.addEventListener("orientationchange",updateOrientation,false);
updateOrientation();
};
window.addEventListener("DOMContentLoaded",init,false);
})();
</script>
</body>
</html>
使用media query方式
這是一種更爲方便的方式，使用純CSS就實現了對應的功能，以下代碼演示：
Html代碼
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title>橫豎屏切換檢測</title>
<style type="text/css">
@media all and (orientation : landscape) {
body {
background-color: #ff0000;
}
}
@media all and (orientation : portrait){
body {
background-color: #00ff00;
}
}
</style>
</head>
<body>
<div>
內容
</div>
</body>
</html>
低版本瀏覽器的平穩降級
若是目標移動瀏覽器不支持media query，同時window.orientation也不存在，則咱們須要採用另一種方式來實現————使用定時器「僞實時」地對比當前窗口的高(window.innerHeight)與寬(window.innerWidth)之比，從而斷定當前的橫豎屏狀態。以下代碼所示：
Html代碼
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title>按鍵</title>
<style type="text/css">
.landscape body {
background-color: #ff0000;
}
.portrait body {
background-color: #00ffff;
}
</style>
<script type="text/javascript">
(function(){
var updateOrientation=function(){
var orientation=(window.innerWidth > window.innerHeight)? "landscape" : "portrait";
document.body.parentNode.setAttribute("class",orientation);
};
var init=function(){
updateOrientation();
window.setInterval(updateOrientation,5000);
};
window.addEventListener("DOMContentLoaded",init,false);
})();
</script>
</head>
<body>
<div>
內容
</div>
</body>
</html>
統一解決方案
將以上的兩種解決方案整合在一塊兒，就能夠實現一個跨瀏覽器的解決方案，以下代碼：
Html代碼
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title>橫豎屏切換檢測</title>
<style type="text/css">
.landscape body {
background-color: #ff0000;
}
.portrait body {
background-color: #00ffff;
}
</style>
<script type="text/javascript">
(function(){
var supportOrientation=(typeof window.orientation == "number" && typeof window.onorientationchange == "object");
var updateOrientation=function(){
if(supportOrientation){
updateOrientation=function(){
var orientation=window.orientation;
switch(orientation){
case 90:
case -90:
orientation="landscape";
break;
default:
orientation="portrait";
}
document.body.parentNode.setAttribute("class",orientation);
};
}else{
updateOrientation=function(){
var orientation=(window.innerWidth > window.innerHeight)? "landscape":"portrait";
document.body.parentNode.setAttribute("class",orientation);
};
}
updateOrientation();
};
var init=function(){
updateOrientation();
if(supportOrientation){
window.addEventListener("orientationchange",updateOrientation,false);
}else{
window.setInterval(updateOrientation,5000);
}
};
window.addEventListener("DOMContentLoaded",init,false);
})();
</script>
</head>
<body>
<div>
內容
</div>
</body>
</html>
【原文】http://davidbcalhoun.com/2010/dealing-with-device-orientation
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
補充：
1. 鎖定 viewport
ontouchmove="event.preventDefault()" //鎖定viewport，任何屏幕操做不移動用戶界面（彈出鍵盤除外）。 |
2. 被點擊元素的外觀變化，能夠使用樣式來設定：
-webkit-tap-highlight-color: 顏色 |
3. 偵測iPhone/iPod
開發特定設備的移動網站，首先要作的就是設備偵測了。下面是使用Javascript偵測iPhone/iPod的UA，而後轉向到專屬的URL。
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) { if (document.cookie.indexOf("iphone_redirect=false") == -1) { window.location =" http://m.example.com "; } } |
雖然Javascript是能夠在水果設備上運行的，可是用戶仍是能夠禁用。它也會形成客戶端刷新和額外的數據傳輸，因此下面是服務器端偵測和轉向：
if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) { header('Location: http://yoursite.com/iphone '); exit(); } |
4. 阻止旋轉屏幕時自動調整字體大小
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;} |
5. iPhone才識別的CSS
若是不想設備偵測，能夠用CSS媒體查詢來專爲iPhone/iPod定義樣式。
@media screen and (max-device-width: 480px) {} |
6. 縮小圖片
網站的大圖一般寬度都超過480像素，若是用前面的代碼限制了縮放，這些圖片在iPhone版顯示顯然會超過屏幕。好在iPhone機能還夠，咱們能夠用CSS讓iPhone自動將大圖片縮小顯示。
@mediascreen and (max-device-width:480px){ img{max-width:100%;height:auto;} } |
7. 模擬:hover僞類
由於iPhone並無鼠標指針，因此沒有hover事件。那麼CSS :hover僞類就沒用了。可是iPhone有Touch事件，onTouchStart 相似 onMouseOver，onTouchEnd 相似 onMouseOut。因此咱們能夠用它來模擬hover。使用Javascript：
var myLinks = document.getElementsByTagName('a'); for(var i = 0; i < myLinks.length; i++){ myLinks[i].addEventListener(’touchstart’,function(){this.className = 「hover」;},false); myLinks[i].addEventListener(’touchend’,function(){this.className = 「」;},false); } |
而後用CSS增長hover效果：
a:hover, a.hover {/* 你的hover效果 */ } |
這樣設計一個連接，感受能夠更像按鈕。而且，這個模擬能夠用在任何元素上。
八、多指觸控的問題
多根手指在屏幕上，提起一根，會刷新一次全局 touch！從新觸發第一根手指的touchstart，這點和蘋果官方網站上介紹的不一樣。
九、device-pixel-ratio（詳細見：http://www.zhangxinxu.com/wordpress/?p=2568）
它得意思是：Gives the number of device pixels per CSS pixel.也即咱們抒寫得css px和物理px(device px)之間得比率。
iphone的物理分辨率是320X480，可是呈現的內容倒是640x960，但其實咱們設置的css px是相對於物理分辨率的，即320x480，可是由於咱們設置的css px要顯示在更寬闊的640x960的內容區域裏頭，因此10個css px在640x960的呈現效果就至關於5個device px在320x480的呈現效果。因此每一個css px。
css px與device px
因此若是圖片得大小是100x100，那麼到iphone裏頭就會被放大2倍，因而圖像會變得比之前模糊，一般得解決辦法是，用background-size設置爲50%，之前的一半，而後再放iphone放大2倍，等於沒變化，恢復到正常效果，不模糊了。
devicePixelRatio
window.devicePixelRatio is the ratio between physical pixels and device-independent pixels (dips) on the device.
window.devicePixelRatio = physical pixels / dips
十、Viewport詳解
什麼是Viewport
手機瀏覽器是把頁面放在一個虛擬的「窗口」（viewport）中，一般這個虛擬的「窗口」（viewport）比屏幕寬，這樣就不用把每一個網頁擠到很小的窗口中（這樣會破壞沒有針對手機瀏覽器優化的網頁的佈局），用戶能夠經過平移和縮放來看網頁的不一樣部分。移動版的 Safari 瀏覽器最新引進了 viewport 這個 meta tag，讓網頁開發者來控制 viewport 的大小和縮放，其餘手機瀏覽器也基本支持。
Viewport 基礎
一個經常使用的針對移動網頁優化過的頁面的 viewport meta 標籤大體以下：
<meta name=」viewport」 content=」width=device-width, initial-scale=1, maximum-scale=1″>
width：控制 viewport 的大小，能夠指定的一個值，若是 600，或者特殊的值，如 device-width 爲設備的寬度（單位爲縮放爲 100% 時的 CSS 的像素）。
height：和 width 相對應，指定高度。
initial-scale：初始縮放比例，也便是當頁面第一次 load 的時候縮放比例。
maximum-scale：容許用戶縮放到的最大比例。
minimum-scale：容許用戶縮放到的最小比例。
user-scalable：用戶是否能夠手動縮放
關於viewport的一些問題
viewport並不是只是ios上的獨有屬性，在android、winphone上一樣也有viewport。它們要解決的問題是相同的，即無視設備的真實分辨率，直接經過dpi，在物理尺寸和瀏覽器之間重設分辨率，這個分辨率和設備的分辨率無關。好比，你拿個3.5寸-320 * 480的iphone3 gs、3.5寸-640 * 960的iphone4或者9.7寸-1024*768的ipad2，雖然設備的分辨率不一樣,物理尺寸也不一樣，但你能夠經過設置viewport讓它們在瀏覽器裏有相同的分辨率。好比說，你的網站是800px寬，你能夠經過設置viewport的width=800，來讓你的網站在這三個不一樣的設備上都恰好滿屏顯示你的網站。
網上一搜關於viewport的知識，基本上全都是以下信息：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
這段代碼的意思是，讓viewport的寬度等於物理設備上的真實分辨率，不容許用戶縮放。一都主流的web app都是這麼設置的，它的做用實際上是故意捨棄viewport，不縮放頁面，這樣dpi確定和設備上的真實分辨率是同樣的，不作任何縮放，網頁會所以顯得更高細膩。玩ps的同窗應該都知道，當你將一張1000 * 1000的圖片直接縮放至500 * 500分變成什麼樣，對吧？圖片的失真必定逃不掉。
但我要作的一個應用卻偏偏相反，須要利用viewport，利用縮放。不論真實分辨率是多少，不管物理尺寸是多少，我都但願在瀏覽器裏，能有統一的分辨率，同時也不容許用戶縮放。我用來測試的設備有：iphone四、ipad二、htc的g十一、不知道什麼廠商的aquos phone（android系統）、華碩的android pad、dell的winphone而後我一路遇到了以下問題：
1）若是不顯示地設置viewport，那麼width的默認爲980。若是頁面的全部元素寬度都小於980，此時width爲980，若是頁面最寬的位置超過980，那麼width等於最大寬度。總之，默認能將整個頁面從左到右顯示出來。若是設置了viewport，好比，只單純地設置了user-scalable=no，例如<meta name="viewport" content="user-scalable=no" />，那麼ios下width仍是按980顯示（即默認就會經過dpi縮放），但android和winphone下卻不會再縮放了，瀏覽器分辨率和真實設置分辨率一致。
2）對於ios設備，設置width能夠生效，但對於android，設置width並不會生效。ios設備，縮放的比率即dpi是經過你設置的width和設置真實分辨率自動計算的，而android下你設置width無效，你能設置的是一個特殊的字段target-densitydpi，關於target-densitydpi能夠參考一下這篇文章：http://hi.baidu.com/j_fo/blog/item/748361279ebccd18908f9d7d.html。也就是說，有三個變量：瀏覽器width、設備真實width、dpi。 咱們簡單地用個公式來表達它們之間的關係吧（並不是真實關係，簡單說明用） 設備真實width * dpi = 瀏覽器width，這裏的三個變量，設備真實width是個咱們不能操做的已知值，另外兩個變量咱們能夠設置一個來影響另外一個，在ios中，咱們能改的是瀏覽器width，dpi自動生成，而在android中，咱們能改的是dpi，瀏覽器width自動生成。對於android，不管咱們如何設置width，也不會對瀏覽器width產生影響。
ps：這裏我另外再說一個奇怪的問題：在htc的g11裏（htc的手機我只有這一個，別的沒有測），若是設置了dpi而不顯示地設置width，則user-scalable=no不生效，便是說：<meta name="viewport" content="target-densitydpi=300,user-scalable=no" />，沒法阻止用戶縮放屏幕。咱們須要顯示地設置一下width值，僅管這個值對android下的瀏覽器分辨屏並不產生任何影響（對ios仍是會產生影響的），咱們仍然要設置它，並且這個值必定要大於320，若是小於等於320，也沒法使user-scalable=no生效。這個問題只在htc的g11手機上出現，在aquos phone沒有這個問題。兼容android真是件頭痛的事 @_@，將來還不知道有多少坑呢。而在winphone上，結果就更奇怪了：我給viewport的width設一個大於480的值，user-scalable=no就失效了，而設一個小於480的值，user-scalable=no能生效。但不管我給viewport的width設多少值，對winphone真正顯示的width卻並不產生我預期的影響，經過target-densitydpi也沒有影響。設置width，若是小於480的話，屏幕會縮放，但縮小的比例卻和我預期徹底不同，我不知道它是按照什麼規律縮放的。不知道這是winphone的問題，仍是dell實現的問題。
3）這一條和上一條應該是直接相關的：ios設備在橫豎屏時，會自動調整dpi，不管橫屏仍是豎屏，都能保證瀏覽器width等於viewport中設置的值，因此橫豎屏的時候，頁面裏顯示的內容的大小是會自動縮放產生變化的。而android手機在橫豎屏的時候，不會改變dpi，在橫豎屏的時候，網頁不會產生縮放。也正所以，ios能夠保證橫豎屏頁面都不會產生滾動條，滿屏顯示，而android卻沒法保證這一點，橫着滿屏則豎着沒法滿屏，反之亦然。
4）對於ios設備，若是width顯示定義了，而頁面最寬的位置超過width的話，width無效，仍按最寬的寬度來顯示（不會有滾動條）。但此時會出現一個很奇怪的問題，當你將手機橫豎屏切換幾回以後，會發現你的頁面自動放大了，出現了滾動條，但其實放大後的寬度其實和你設的width也並無關係。爲了防止這種狀況出現，你須要將width的寬度設置得比頁面最寬的地方更大，或者相同。
十一、深刻了解iPad上的MouseEvent
iPad上沒有鼠標，因此手指在觸發觸摸事件（TouchEvent）的時候，系統也會產生出模擬的鼠標事件（MouseEvent）。
這對於普通網頁的瀏覽需求而言，基本能夠作到與PC端瀏覽器無明顯差別。可是若是你正在作一款與用戶有着強交互的WebAPP程序，好比一個html5小遊戲或者圖片處理工具什麼的，那麼依賴默認模擬恐怕不能知足產品的需求。
一個一般的建議是：在iPad上(或者說各個移動終端上)，你的WebAPP應該能處理好TouchEvent，而再也不依賴於MouseEvent。
然而若是你的WebAPP須要同時面向PC和iPad兩種平臺的瀏覽器用戶，而迫於時間或者人力配備你無法分別提供兩種版本的時候。。。你也許有必要了解一下下面這些有關iPad上MouseEvent相關的細節，而後砍掉兩個平臺上有明顯差別的一些花哨特性，這樣才能作出一個較好地兼容兩個平臺的WebAPP。
在閱讀下文前，我假設你已經熟悉PC瀏覽器上MouseEvent的運做，也對TouchEvent有了粗略的瞭解。若是你並不瞭解，那理解如下各個細節可能有困難。
safari只對可點擊(clickable)的HTML元素纔會產生MouseEvent。這在ADC文檔中也提到了。
什麼叫可點擊，ADC文檔定義是隻要HTML元素響應mousemove、mousedown、mouseup、click四種MouseEvent中的一個就算是可點擊。若是你有個網頁菜單隻響應mouseover、mouseout，那可能不能工做，加個onclick="void(0)"就好了。但實際測試發現，只要響應任意一個MouseEvent就算可點擊了，估計safari已修正此問題。
注意：下文全部關於「可點擊」「不可點擊」的描述都是針對是否響應MouseEvent而言，而不是指TouchEvent。與W3C規範建議的不一樣，iPad是在手指離開屏幕之後纔可能會產生MouseEvent。因此像手指單擊屏幕這種操做的實際事件序列一般是：touchstart->touchend->mousemove->mousedown->mouseup->click；而不是咱們指望的這樣的時序：touchstart->mousedown->touchend->mouseup->click。
手指快速單擊屏幕觸發的MouseEvent並非緊跟在TouchEvent以後的，有一個時延。這是爲了等待可能的雙擊操做。iPad2 Safari的實測時延大約爲375ms。因此實際時序大約是這樣的：(手指按下)touchstart->(手指快速提起)touchend->(等待約375ms)mousemove->mousedown->mouseup->click。這對WebAPP的直接影響就是因爲從用戶操做完（手指提起）到onclick執行有375ms的延時，用戶總以爲你的軟件反應有點慢半拍。
但若是單擊速度較慢，即手指按下到提起之間的時延超過大約120ms，touchend到其餘MouseEvent之間就再也不會有這個375ms的時延。由於系統認爲這已經不知足手指快速雙擊操做的斷定條件。手指快速雙擊屏幕操做不會觸發任何MouseEvent。我是說「任何」，就是說不光不會觸發dblclick事件，連mousedown、mouseup、click等等全部MouseEvent都不會有。本操做默認的事件流是：touchstart->touchend->touchstart->touchend。若是頁面開發人員不作任何限制，瀏覽器默認行爲是嘗試縮放網頁。
一次手指單擊操做不會同時產生mouseover和(mousedown、mouseup、click)兩組事件。若是一個響應mouseover事件的元素從渲染完畢或者上一次收到mouseout以後還沒有收到mouseover事件，則單擊觸發的事件流爲：touchstart->touchend->mouseover->mousemove；反之，單擊觸發的事件流爲：touchstart->touchend->mousemove->mousedown->mouseup->click。
不響應mouseover事件的元素只會收到上述後一種事件流，這避免絕大多數連接須要手指點擊兩次才能跳轉頁面。一個元素的mouseout事件只有在另外一元素被觸摸以後，才能被觸發。由於沒有鼠標，因此不能像PC機上同樣在鼠標移入移除元素區域時觸發mouseover和mouseout事件，只能靠手指點擊來切換mouseover；又由於不可點擊的元素不會觸發任何MouseEvent，因此只有在另外一個HTML元素上觸發MouseEvent時前一個可點擊元素纔會收到mouseout事件。
手指在屏幕上移動，不會觸發大量的mousemove事件。如第2點所說，只有在手指離開屏幕時，纔可能產生MouseEvent消息，因此你只可能收到一次mousemove事件，包括本次操做觸發的其餘全部MouseEvent，座標都是手指提起位置的座標。因此在PC瀏覽器上經過mousemove實現的邏輯，在iPad上須要經過TouchEvent來實現。
實測發現，彷佛手指在屏幕上緩慢移動時，提起手指纔會觸發MouseEvent；若是手指快速移動，則提起手指不會觸發任何MouseEvent。緣由不明。若是一個HTML元素響應TouchEvent，手指在該元素上按下並移動，即便手指移出該元素的區域，該元素仍然會收到touchmove事件，直到手指提起收到一個touchend結束。也就是說一個HTML元素一般總能收到一個完整的touchstart->(N個)touchmove->touchend事件序列，除非系統給它發出一個touchcancel事件。這跟PC瀏覽器上MouseEvent特性也不太相同。
一旦在一次手指操做的事件序列touchstart->(0-N個)touchmove->touchend中的任何一個事件函數裏調用了event.preventDefault()，本次操做再也不產生任何MouseEvent。因此不能指望在touchstart中調用preventDefault只阻止mousedown事件的產生。
以上各個特性在iPad2/iOS4.3.3的safari上測試驗證過，對於其餘safari內核的瀏覽器(如QQ瀏覽器HD等)都是適用的。
至於其餘非safari內核的瀏覽器，在MouseEvent的支持上基本都不如safari完整和合理。例如Opera Mini只有手指單擊屏幕時產生MouseEvent，而且不支持TouchEvent；UC瀏覽器雖然將mousedown移到了touchstart以後，可是手指移動後提起來卻不能產生mouseup事件。有興趣的能夠作進一步測試。Android用戶也能夠在Android平板電腦上作一些測試，若是能將測試結果分享給我，我將很是感謝。
【附錄及參考文檔】
1. 測試頁面連接：http://hokyhu.sinaapp.com/event_test.html
你還能夠在這個頁面上體驗iPad強大的多點觸摸功能，試試看最多能檢測到幾個觸點。
2. W3C關於TouchEvent的技術草案：https://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html
該草案主要定義了TouchEvent相關的技術細節，並少許涉及TouchEvent與MouseEvent之間的配合。
3. ADC文檔 ：文檔在「Handling Events」這一章描述了對MouseEvent的支持。
5、app開發經驗談和實例參考
- 1. webApp總結
- 2. webapp總結
- 3. 【WebApp】單頁webapp應用開發總結【暫完】
- 4. webapp框架集合
- 5. webkit webApp 開發技術要點總結
- 6. webApp前端開發技巧總結
- 7. webApp 開發技術要點總結
- 8. 轉。webapp開發小tips
- 9. WebApp開發-Zepto
- 10. uniapp開發webAPP
- 更多相關文章...
- • Scala Set(集合) - Scala教程
- • C# 集合（Collection） - C#教程
- • PHP開發工具
- • 算法總結-雙指針
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. webApp總結
- 2. webapp總結
- 3. 【WebApp】單頁webapp應用開發總結【暫完】
- 4. webapp框架集合
- 5. webkit webApp 開發技術要點總結
- 6. webApp前端開發技巧總結
- 7. webApp 開發技術要點總結
- 8. 轉。webapp開發小tips
- 9. WebApp開發-Zepto
- 10. uniapp開發webAPP