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

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;

#  最后

**自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**

**深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。**

**因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**

![img](https://img-blog.csdnimg.cn/img_convert/476ef61fdaf500e704b42c0988967ca2.jpeg)

![](https://img-blog.csdnimg.cn/img_convert/9aae98692c5ed8f5a705dfbcb02742bb.png)

![](https://img-blog.csdnimg.cn/img_convert/65b69afcd2b2d41ba7ad3d9afbcfd3c4.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

[**如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.csdn.net/topics/618191877)

**由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**
打开新的学习之门！**

[**如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.csdn.net/topics/618191877)

**由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**