移動端Web資源整合

時間 2019-11-11

標籤移動 web 資源整合欄目無線简体版

原文原文鏈接

meta基礎知識css

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>

常見問題html

部分android系統中元素被點擊時產生的邊框怎麼去掉

android用戶點擊一個連接，會出現一個邊框或者半透明灰色遮罩, 不一樣生產商定義出來額效果不同，可設置-webkit-tap-highlight-color的alpha值爲0去除部分機器自帶的效果android

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:peun@foxmail.com">peun@foxmail.com</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>