webapp開發經驗總結

標籤：android   style   http   io   color   ar   os   使用   for   

webapp開發的大趨勢之下，本人收集整理了一寫關於webapp開發的經驗，歡迎大家補充指正。

關於link

<link rel="apple-touch-startup-image" href="images/start.jpg"/>

表示在點擊主畫面中產生的快捷表徵圖後，網站在載入過程中，顯示的圖片。這個功能使用者體驗很好。避免載入時的白屏，減少使用者等待網站載入過程的煩悶。缺陷是目前只支援豎屏瀏覽模式，橫屏瀏覽時不支援。

<link rel="apple-touch-icon" href="images/iphone.png" /><link rel="apple-touch-icon" sizes="72x72" href="images/ipad.png" /><link rel="apple-touch-icon" sizes="114x114" href="images/iphone4.png" />

這三項是針對不同版本自訂的不同的主畫面表徵圖。當然不定義也可以，點擊主畫面時，會以當前螢幕作為表徵圖的。而其中apple-touch-icon表示的該表徵圖是自動加高光的表徵圖按鈕。與之相對應的是apple-touch-icon-precomposed。按原設計不加高光效果的表徵圖。可根據實際項目情況，選擇使用。

也可以通過media來控制載入不同的畫面：

// iPhone<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" />// iPhone Retina<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />// iPhone 5<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png">// iPad portrait<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image" />// iPad landscape<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image" />// iPad Retina portrait<link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />// iPad Retina landscape<link href="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px)  and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image" />

關於媒體查詢

<link rel="stylesheet" media="screen and (orientation:portrait) and (min-width:960px)" href="style.css" />

常用裝置類型：

• all：所有裝置
• screen：電腦顯示器
• handheld：可攜式裝置
• print：列印用紙或者預覽列印圖
• projection：各種攝影裝置
• tv：電視類型的裝置

常用裝置特性：

• width：視口寬度
• height：視口高度
• device-width：裝置螢幕的寬度
• device-height：裝置螢幕的高度
• orientation：檢測螢幕處於橫屏還是豎屏，portrait|landscape
• aspect-ratio：基於視口的寬高比例
• device-aspect-ratio：基於裝置螢幕的寬高比
• color：顏色的位元，如min-color：32 匹配裝置是否有32位或以上的顏色
• color-index：裝置的色彩索引表中的顏色數
• monochrome：檢測單色振緩衝區中每像素使用的位元。為非負數，如monochrome：3
• resolution：檢測螢幕或印表機的解析度，如min-resolution：300dpi(dpi後面會介紹)，也可以是每厘米像素點的度量值，如min-resolution：120dpcm
• scan：掃描方式，值為progressive（漸進式掃描）、interlace（隔行掃描）
• grid：檢測輸出裝置是網格裝置還是位元影像裝置

建立媒體查詢時，上述特性（scan和grid不行）都可以加上min和max首碼建立媒體查詢的範圍。

dpi，所表示的是每英寸所擁有的像素（pixel）數目，數值越高，即代表顯示屏能夠以越高的密度顯示映像。當達到人眼的極限解析度時，喬幫主給它取了一個很高端的名字——Retina。從iphone4時代開始就已經是Retina屏了。安卓手機的螢幕尺寸和密度分別為：小、中、大、超大；ldpi（低）、mdpi（中）、hdpi（高）、xhdpi（超高）。目前安卓手機高分屏和超分屏已經是主流了。按照螢幕解析度的劃分：

/*中解析度螢幕*/@media (-webkit-min-device-pixl-ratio: 1){    //css代碼}/*高解析度螢幕*/@media (-webkit-min-device-pixl-ratio: 1.5){    //css代碼}/*超高解析度螢幕（傳說中的Retina屏）*/@media (-webkit-min-device-pixl-ratio: 2){    //css代碼}

當然我們還可以用到之前提供的幾個特性，如下：

@media screen and (max-width: 768){    //css代碼}

關於meta

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />

上面代碼錶示寬度為裝置的寬度，預設不縮放，不允許使用者縮放（即禁止縮放），在網頁載入時隱藏地址欄與導覽列（ios7.1新增）。

width – // [pixel_value | device-height] viewport 的寬度，範圍從 200 到 10,000，預設為 980 像素height – // [pixel_value | device-width ] viewport 的高度，範圍從 223 到 10,000 initial-scale – // float_value，初始的縮放比例 （範圍從 > 0 到 10）minimum-scale – // float_value，允許使用者縮放到的最小比例maximum-scale – // float_value，允許使用者縮放到的最大比例user-scalable – // [yes | no] 使用者是否可以手動縮放target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] 目標螢幕像素密度

apple-mobile-web-app-capable

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

是否啟動webapp功能，會刪除預設的蘋果工具列和功能表列。

apple-mobile-web-app-status-bar-style

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

當啟動webapp功能時，顯示手機訊號、時間、電池的頂部導覽列的顏色。預設值為default（白色），可以定為black（黑色）和black-translucent（灰色半透明）。這個主要是根據實際的頁面設計的主體色為搭配來進行設定。

telephone & email

<meta name="format-detection" content="telphone=no, email=no" />

忽略電話號碼識別和郵箱識別。

其他meta

<!-- 啟用360瀏覽器的極速模式(webkit) --><meta name="renderer" content="webkit"><!-- 避免IE使用相容模式 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 針對手持功能最佳化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 --><meta name="HandheldFriendly" content="true"><!-- 微軟的老式瀏覽器 --><meta name="MobileOptimized" content="320"><!-- uc強制豎屏 --><meta name="screen-orientation" content="portrait"><!-- QQ強制豎屏 --><meta name="x5-orientation" content="portrait"><!-- UC強制全屏 --><meta name="full-screen" content="yes"><!-- QQ強制全屏 --><meta name="x5-fullscreen" content="true"><!-- UC應用模式 --><meta name="browsermode" content="application"><!-- QQ應用模式 --><meta name="x5-page-mode" content="app"><!--這meta的作用就是刪除預設的蘋果工具列和功能表列--><meta name="apple-mobile-web-app-capable" content="yes"><!--網站開啟對web app程式的支援--><meta name="apple-touch-fullscreen" content="yes"><!--手機號碼不被顯示為撥號連結--><meta name="format-detection" content="telephone=no"><!--在web app應用下狀態條（螢幕頂部條）的顏色--><meta name="apple-mobile-web-app-status-bar-style" content="black"><!-- windows phone 點擊無高光 --><meta name="msapplication-tap-highlight" content="no"><!--移動web頁面是否自動探測電話號碼--><meta http-equiv="x-rim-auto-match" content="none">

一些技巧

• -webkit-tap-highlight-color:rgba(255,255,255,0)可以同時屏蔽ios和android下點擊元素時出現的陰影。備忘：transparent的屬性值在android下無效。
• -webkit-appearance:none可以同時屏蔽輸入框怪異的內陰影。
• -webkit-transform:translate3d(0, 0, 0)在ios下可以讓動畫更加流暢（這個屬性會調用硬體加速模式），但是在android下不可亂用，很多見所未見的bug就是因為這個。
• -webkit-background-size可以做高清表徵圖，不過一些低版本的android只能識別background-size，所以有必要兩個都要寫上；用這個屬性的時候推薦用cover這個值，可以自動去匹配寬和高。
• text-shadow多用這個屬性，可以美化文字效果。
• android、ios4及以下，固定寬/高區塊層級元素的overflow:scroll/auto失效，屬於瀏覽器的bug，可藉助第三方工具實現。
• ios5+可以通過scrollTo(0,0)來自動隱藏瀏覽器地址欄。
• css3動畫會影響你的自動聚焦，所以自動聚焦要在動畫執行之前來做，或者直接捨棄。
• 當用iScroll時候，不能使用:focus{outline:0}偽類，否則滑動會卡。
• webkit在渲染頁面時，會自動調整字型大小,比如橫豎屏切換時。-webkit-text-size-adjust:none，但是如果設定為none,那麼會導致頁面的縮放功能不能用，最好辦法是：-webkit-text-size-adjust:100%。
• 禁止使用者選擇頁面文字：-webkit-user-select: none。
• 禁用連結快顯視窗：-webkit-touch-callout:none。

關於transition閃屏的解決方案：

-webkit-transform-style: preserve-3d;/*設定內嵌的元素在 3D 空間如何呈現：保留 3D*/-webkit-backface-visibility:hidden;/*（設定進行轉換的元素的背面在面對使用者時是否可見：隱藏）*/

 

 

webapp開發經驗總結