標籤:常見問題 viewport focus ant scala android系統 頁面 實現 表示
meta基礎知識
- H5頁面視窗自動調整到裝置寬度,並禁止使用者縮放頁面
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
- 忽略將頁面中的數字識別為電話號碼
<meta name="format-detection" content="telephone=no" />
- 忽略Android平台中對郵箱地址的識別
<meta name="format-detection" content="email=no" />
- 當網站添加到主畫面快速啟動方式,可隱藏地址欄,僅針對ios的safari
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- ios7.0版本以後,safari上已看不到效果 -->
- 將網站添加到主畫面快速啟動方式,僅針對ios的safari頂端狀態條的樣式
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 可選default、black、black-translucent -->
- viewport模板——通用
<!DOCTYPE html><html><head><meta charset="utf-8"><meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta content="email=no" name="format-detection"><title>標題</title><link rel="stylesheet" href="index.css"></head><body>這裡開始內容</body></html>
- viewport模板 – target-densitydpi=device-dpi,android 2.3.5以下版本不支援
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi"><!-- width取值與頁面定義的寬度一致 --><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta content="email=no" name="format-detection"><title>標題</title><link rel="stylesheet" href="index.css"></head><body>這裡開始內容</body></html>
常見問題
- 部分android系統中元素被點擊時產生的邊框怎麼去掉
android使用者點擊一個連結,會出現一個邊框或者半透明灰色遮罩, 不同生產商定義出來額效果不一樣,可設定-webkit-tap-highlight-color的alpha值為0去除部分機器內建的效果
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)-webkit-user-modify:read-write-plaintext-only;}
- winphone系統a、input標籤被點擊時產生的半透明灰色背景怎麼去掉
<meta name="msapplication-tap-highlight" content="no">
- webkit表單元素的預設面板怎麼重設
.css{-webkit-appearance:none;}
- webkit表單輸入框placeholder的顏色值能改變麼
input::-webkit-input-placeholder{color:#AAAAAA;}input:focus::-webkit-input-placeholder{color:#EEEEEE;}
- 禁用 radio 和 checkbox 預設樣式
input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{display: none;}
- 禁用PC端表單輸入框預設清除按鈕
input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear{display: none;}
- 禁止ios和android使用者選中文字
.css{-webkit-user-select:none}
- 打電話發簡訊實現
<a href="tel:0755-10086">打電話給:0755-10086</a>
<a href="sms:10086">發簡訊給: 10086</a>
- 寫郵件實現
<a href="mailto:[email protected]">[email protected]</a>
- 旋轉螢幕的事件和樣式
事件window.orientation,取值:正負90表示橫屏模式、0和180表現為豎屏模式;window.onorientationchange = function(){switch(window.orientation){case -90:case 90:alert("橫屏:" + window.orientation);case 0:case 180:alert("豎屏:" + window.orientation);break;}}樣式//豎屏時使用的樣式@media all and (orientation:portrait) {.css{}}//橫屏時使用的樣式@media all and (orientation:landscape) {.css{}}
- audio元素和video元素在ios和andriod中無法自動播放
$(‘html‘).one(‘touchstart‘,function(){audio.play()})
- ios使用-webkit-text-size-adjust禁止調整字型大小
body{-webkit-text-size-adjust: 100%!important;}
- 取消input在ios下,輸入的時候英文首字母的預設大寫
<input autocapitalize="off" autocorrect="off" />
- android 上去掉語音輸入按鈕
input::-webkit-input-speech-button {display: none}
- 播放視頻不全屏
<!--1.ios7+支援自動播放2.支援Airplay的裝置(如:音箱、Apple TV)播放x-webkit-airplay="true"3.播放視頻不全屏webkit-playsinline="true"--><video x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src="http://"></video>
移動端Web資源整合