移動(dòng)端基本環(huán)境
測(cè)試:chrome模擬的只是尺寸
<meta name="viewport" content="width=400,initial-scale=1,user-scalable=no,initial-scale=1">
<!--
這個(gè)表示的是視口設(shè)置[可視區(qū)窗口]
- 默認(rèn)不設(shè)置viewport,默認(rèn)在移動(dòng)端是980.
- width=device-width
- width表示可視區(qū)的寬度,參數(shù)有 number||device-width
- user-scalable
- 是否允許用戶縮放,yes||no
- IOS10無(wú)效
- initial-scale
- 初始.[實(shí)際上放縮的是THML的寬.瀏覽器討巧]
- 初始比例要和最小縮放比例保持一致[用戶會(huì)放大的情況比較多]
- minimum-scale
- 最小縮放比例
- maximum-scale
- 最大縮放比例[ios10已經(jīng)無(wú)效]
-->
<!--達(dá)到自適應(yīng)的狀態(tài)-->
<meta name="viewport" content="width=device-width,user-scalable=no">
這個(gè)輸出的是像素比[像素比:把一個(gè)像素放大到window.devicePixelRatio個(gè)像素去顯示]
alert(window.devicePixelRatio);`
移動(dòng)端常見(jiàn)的一些問(wèn)題
<!--
強(qiáng)制X5內(nèi)核瀏覽器的顯示模式 [QQ瀏覽器 微信 QQweb]
landscape||portrait
- landscape 強(qiáng)制橫屏
- portait 強(qiáng)制豎屏
-->
<meta name="x5-orientation" content="portait" />
<!--
X5內(nèi)核強(qiáng)制全屏顯示
-->
<meta name="x5-fullscreen" content="true" />
<!--
強(qiáng)制UC瀏覽器橫屏顯示
-->
<meta name="screen-orientation" content="portrait">
<!--
強(qiáng)制UC瀏覽器全屏顯示
-->
<meta name="full-screen" content="yes">
<!-- 以上的功能只有這兩個(gè)瀏覽器支持-->
<meta name="format-detection" content="telephone=no, email=no" />
<!--
在手機(jī)瀏覽器中會(huì)自動(dòng)識(shí)別電話號(hào)碼和emall,禁止識(shí)別
-->
// 被禁止之后撥打電話&&發(fā)送郵件
<!--
撥打電話
-->
<a href="tel:13822">請(qǐng)撥打13822222222</a>
/*消除點(diǎn)擊之后的陰影問(wèn)題*/
a,
input,
button{
-webkit-tap-highlight-color: rgba(255,2,222,1);
}
