前端面试 - 移动端常用技巧

1. 1px线

对于需要添加1像素边框的标签加上border-1px类，然后对伪类进行缩放

1像素border实现：伪类（绝对定位）+ 缩放（对伪类Y轴缩放），

另一种思路是在html的header里添加如下一句：

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

2. 调用系统的某些功能

<!-- 拨号 -->
<a href="tel:10086">打电话给: 10086</a>
 
<!-- 发送短信 -->
<a href="sms:10086">发短信给: 10086</a>
 
<!-- 发送邮件 -->
<a href="mailto:[email protected]">发邮件给：[email protected]</a>
 
<!-- 选择照片或者拍摄照片 -->
<input type="file" accept="image/*">
 
<!-- 选择视频或者拍摄视频 -->
<input type="file" accept="video/*">
 
<!-- 多选 -->
<input type="file" multiple>
复制代码

3. 打开应用

<a href="weixin://">打开微信</a>
<a href="alipays://">打开支付宝</a>
<a href="alipays://platformapi/startapp?saId=10000007">打开支付宝的扫一扫功能</a>
<a href="alipays://platformapi/startapp?appId=60000002">打开支付宝的蚂蚁森林</a>

4. 禁止

// 禁止长按图片保存
img {
  -webkit-touch-callout: none;
  pointer-events: none; // 像微信浏览器还是无法禁止，加上这行样式即可
}
 
// 禁止长按选择文字
div {
  -webkit-user-select: none;
}
 
// 禁止长按呼出菜单
div {
  -webkit-touch-callout: none;
}

5. rem自适应

html {
 font-size: calc(100vw / 3.75);
}
 
body {
  font-size: .14rem;
}

rem的值是根据根元素的字体大小相对计算的，但是我们每个设备的大小不一样，所以根元素的字体大小要动态设置

em是根据相对单位，不是固定的，他会继承父级元素的字体大小，若没有父级则em的相对基准点为浏览器的字体大小，浏览器的字体默认为16px，因此若无父级元素，相对于浏览器大小：Xem=X*16px;
rem是css3新增属性，是完全相对于HTML根元素大小设定的，默认为10px，因此无论父级字体大小，1rem=10px。

字体大小尽量使用pt或者em，rem，代替px。

6. mate

//强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览。
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

//winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉：
<meta name="msapplication-tap-highlight" content="no">

//忽略页面的数字为电话，忽略email识别 ：
<meta name="format-detection" content="telephone=no, email=no"/>

7. 边距凹陷

与在pc端开发一样，开发过程中需要的一个很需要注意的问题的边距塌陷，典型的问题是margin-top的嵌套，对子元素设置margin-top值，子元素相对于父元素的位置没有变，而父元素跟着子元素一起向下移动响应的距离。解决方案：

给父元素div1设置一个padding值

.div1{
　　height: 500px;
　　width: 100%;
　　background: #ccc;
　　overflow: hidden;
}