移動端web開發

標籤：

meta基礎知識點：

頁面自動調整到裝置寬度，並禁止使用者縮放。

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=0" />

針對IOS的meta標籤：

⑴ 允許全屏瀏覽頁面的標籤：

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

⑵ safari頂端狀態列樣式定義/隱藏：

<meta name="apple-mobile-web-app-status-bar-style" content="blank" />  <!--隱藏狀態列--><meta name="apple-mobile-web-app-status-bar-style" content="black" />  <!--定義狀態列樣式為暗黑色-->

⑶ ios會把類似電話號碼的數字變為可點擊並添加到電話的串連，我們可以這樣禁用它：

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

（4）忽略Android平台中對郵箱地址的識別 

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

移動端如何定義字型font-family

body{font-family: "Helvetica Neue", Helvetica, sans-serif;}

在android或者IOS下 撥打到電話代碼如下：

<a href="tel:13512656621">打電話給:13512656621</a>

發簡訊

<a href="sms:10086">發簡訊給: 10086</a>

調用手機系統內建的郵件功能

<p><a href="mailto:[email protected]">發電子郵件</a></p>

webkit表單輸入框placeholder的顏色值改變：

input::-webkit-input-placeholder{color:red;}//顏色改為紅色 input:focus::-webkit-input-placeholder{color:blue;}//使用者點擊變為藍色

在IOS下清除輸入框的內陰影

input,textarea {-webkit-appearance: none;}

 

移動端web開發