web app 開發

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

去除手機瀏覽器標籤預設高亮邊框

-webkit-tap-highlight-color 屬性

屬性描述：這個屬性可以指設定透明度。如果未設定透明度，iOS上的Safari會給予顏色一個預設的透明度。把透明度設為0，則會禁用此屬性。如果你把透明度設為1，元素將會不可見。只用於iOS(iPhone和iPad)，是點擊反饋時的地區背景，或者是點擊時的高亮背景顏色。

但是我使用後發現安卓手機也是支援該屬性的，下面是我寫的樣式

a,button,input{
-webkit-tap-highlight-color:rgba(255,0,0,0);
-webkit-tap-highlight-color: transparent; /* Android */
}

 

 

//強制讓文檔的寬度與裝置的寬度保持1:1，並且文檔最大的寬度比例是1.0，且不允許使用者點擊螢幕放大瀏覽； <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> //iphone裝置中的safari私人meta標籤，允許全螢幕模式瀏覽； <meta content="yes" name="apple-mobile-web-app-capable" /> //iphone的私人標籤，它指定的iphone中safari頂端的狀態條的樣式； <meta content="black" name="apple-mobile-web-app-status-bar-style" /> //告訴裝置忽略將頁面中的數字識別為電話號碼； <meta content="telephone=no" name="format-detection" />

*關閉識別後添加連結

關閉識別後添加連結

代碼如下	複製代碼
<a href="tel:12345654321">打電話給我</a> <a href="sms:12345654321">發簡訊</a> <span onclick="location.href=‘tel:122‘"></span>

*使用HTML5標籤

使用html5標籤增強語義，提升體驗

*放棄float屬性

遇到內容排列排列顯示的布局放棄float，使用display、webkit-box調適型配置

*利用CSS3邊框背景屬性

代碼如下	複製代碼
使用-webkit-border-image代替複雜的（圓角+內發光+高光）

*塊級化a標籤

將每條資料都放在一個a標籤中提升使用者體驗，儘可能的保證使用者的可點擊地區較大。

*去除Android郵箱地址的識別

代碼如下	複製代碼
<meta content="email=no" name="format-detection" />

*去除iOS和Android中的輸入URL的控制列

代碼如下	複製代碼
setTimeout(scrollTo,0,0,0) 需要放在window.onload裡，當前文檔的內容高度必須是高於視窗的高度。

*使用者旋轉裝置

禁止開發人員阻止瀏覽器的orientationchange事件

*使用者是通過主屏啟動你的webapp

IOS 從主屏啟動時navigator.standalone為true,從網站為false
Android 無

*關閉iOS中鍵盤自動大寫

代碼如下	複製代碼
autocapitalize="off"

*iOS中如何徹底禁止使用者在新視窗開啟頁面

代碼如下	複製代碼
IOS -webkit-touch-callout:none;

Android 無效。

*iOS中禁止使用者儲存圖片/複製圖片

代碼如下	複製代碼
-webkit-touch-callout:none

*iOS中如何禁止使用者選中文字

代碼如下	複製代碼
-webkit-user-select:none

*iOS中如何擷取捲軸的值

代碼如下	複製代碼
window.scrollY和window.scrollX

*解決盒子邊框溢出

寬度100%時邊框溢出，-webkit-box-sizing:border-box;

*Android 2.0以下圓角問題

必須加-webkit-

*android頁面自適應

代碼如下	複製代碼
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;" /> *如何解決iOS 4.3版本中safari對頁面中5位元字的自動識別和自動添加樣式 <meta name="format-detection" content="telphone=no" />

*樣式設定

代碼如下

複製代碼

<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" />  www.111cn.net  // 肖像模式樣式 <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" />   // 風景模式樣式 <style media="all and (orientation:portrait)"></style> //豎屏時使用的樣式 <style media="all and (orientation:landscape)"></style> //橫屏時使用的樣式

*事件

代碼如下

複製代碼

/ 手勢事件 touchstart            //當手指接觸螢幕時觸發 touchmove           //當已經接觸螢幕的手指開始移動後觸發 touchend             //當手指離開螢幕時觸發 touchcancel // 觸摸事件 gesturestart          //當兩個手指接觸螢幕時觸發 gesturechange      //當兩個手指接觸螢幕後開始移動時觸發 gestureend // 旋轉螢幕事件 onorientationchange // 檢測觸控螢幕幕的手指何時改變方向 orientationchange www.111cn.net // 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 //旋轉螢幕事件：onorientationchange window.orientation  //0 肖像模式，-90 左旋，90 右旋，180 風景模式

*自動大寫與自動修正

代碼如下	複製代碼
<input type="text" autocapitalize="off" autocorrect="off" />

*阻止旋轉螢幕時自動調整字型大小

代碼如下	複製代碼
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

*縮小圖片

代碼如下	複製代碼
@media screen and (max-device-width: 480px){ 　　img{max-width:100%;height:auto;} }

web app 開發