移动端基本环境
测试:chrome模拟的只是尺寸
<meta name="viewport" content="width=400,initial-scale=1,user-scalable=no,initial-scale=1">
<!--
这个表示的是视口设置[可视区窗口]
- 默认不设置viewport,默认在移动端是980.
- width=device-width
- width表示可视区的宽度,参数有 number||device-width
- user-scalable
- 是否允许用户缩放,yes||no
- IOS10无效
- initial-scale
- 初始.[实际上放缩的是THML的宽.浏览器讨巧]
- 初始比例要和最小缩放比例保持一致[用户会放大的情况比较多]
- minimum-scale
- 最小缩放比例
- maximum-scale
- 最大缩放比例[ios10已经无效]
-->
<!--达到自适应的状态-->
<meta name="viewport" content="width=device-width,user-scalable=no">
这个输出的是像素比[像素比:把一个像素放大到window.devicePixelRatio个像素去显示]
alert(window.devicePixelRatio);`
移动端常见的一些问题
<!--
强制X5内核浏览器的显示模式 [QQ浏览器 微信 QQweb]
landscape||portrait
- landscape 强制横屏
- portait 强制竖屏
-->
<meta name="x5-orientation" content="portait" />
<!--
X5内核强制全屏显示
-->
<meta name="x5-fullscreen" content="true" />
<!--
强制UC浏览器横屏显示
-->
<meta name="screen-orientation" content="portrait">
<!--
强制UC浏览器全屏显示
-->
<meta name="full-screen" content="yes">
<!-- 以上的功能只有这两个浏览器支持-->
<meta name="format-detection" content="telephone=no, email=no" />
<!--
在手机浏览器中会自动识别电话号码和emall,禁止识别
-->
// 被禁止之后拨打电话&&发送邮件
<!--
拨打电话
-->
<a href="tel:13822">请拨打13822222222</a>
/*消除点击之后的阴影问题*/
a,
input,
button{
-webkit-tap-highlight-color: rgba(255,2,222,1);
}
