移动端技巧总结
对移动端开发和适配的技巧总结，主要从适配和注意事项两方面进行总结
1.媒介查询
<style>
@media(min-width: 300px) and (max-width: 320px){
}
</style>
<link rel="" herf="" media="(min-width: 300px) and (max-width: 320px)
2. 手机端加一个meta
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0",maximum-scale=1.0, minimum-scale=1.0>
3. 移动端特点
响应式其实用的不多，主要是在一些新闻网站或博客。大型网站多用两套页面，无IE
- 手机上没有hover
- Vue swipe、jQuery swipe；touch事件
- 没有resize
- 没有滚动条
4.REM手机专用
4.1什么是REM
- em 一个单位m的宽度，一个汉字的宽度
- rem rootem 根元素html的font-size 16px
4.2REM和EM的区别
-
默认的html font-size 是16px
-
chrome默认最小font-size为12px
-
em == font-size
-
区别em单位自己，rem根元素
4.3 手机端方案的特点
-
百分比布局，无法解决宽高比例的问题
-
一切单位以宽度为准，就能完美还原设计稿
4.4 REM使用JS动态调整，可以和其它单位同时存在
<script>
var pageWidth = window.innerWidth
document.write(`<style>html{font-size: ${pageWidth/10}px}</style>`)
</script>
<style>
* {
margin: 0;
padding: 0;
}
.child{
background: #ddd;
}
body {
font-size: 16px;
}
.child {
width: 4rem;
height: 2rem;
margin: 0.5rem;
float: left;
border: 1px solid red /*特别小的还是用px*/
}
.clearfix::after{
content: '';
display: block;
clear: both;
}
</style>
4.5在scss里使用px2rem
在scss文件里添加
@function px( $px ){
@return $px/$designWidth*10 + rem;
}
$designWidth : 640; // 640 是设计稿的宽度，根据设计稿的宽度填写
.child{
width: px(320);
height: px(160);
margin: px(40) px(40);
border: 1px solid red;
float: left;
font-size: 1.2em;
}
5.点击300ms延迟
5.1 click产生延迟的原因
单刚开始出现全触屏手机时的网站都是为桌面端设计的，没有设置<meta name="viewport">,为了方便手机用户，手机浏览器添加了双击缩放的功能。手指在屏幕上快速点击两次，浏览器回将页面缩放至原始比例。
如何判定用户双击呢？在第一次点击屏幕后300ms内有第二次点击，就判定用户想要缩放而不是点击页面元素；所以当用户点击页面元素300ms后浏览器才会响应用户操作，判定用户为点击操作而不是缩放。
5.2 解决方法
-
设置
meta:vp`<meta name="viewport" content="width=device-width">- android添加name=viewport的meta即可消除延迟
- iOS上必须设置属性
content=“width=device-width”，统一采用iOS
-
使用touchstart事件而不是click
-
使用fastclick库（2017年以后逐渐不用）
6. 点击击穿原因及解决
6.1 什么是点击穿透
在移动端，比如当用户通过监听touchstart事件，绑定监听函数让浮层关闭时，关闭后浮层后面对应位置页面其他元素也会被点击。如果浮层后是一个链接，用户点击浮层关闭后大约300ms页面同时发生跳转
6.2 产生原因
触屏设备为了区分用户双击缩放，对click做了300ms延迟触发，因此用户在移动端触屏设备的操作流程以及事件触发如下：
- 手指点击屏幕触发touchstart事件
- 手指短暂停留，如有小移动触发touchmove事件
- 手指离开屏幕触发touchend事件
- 等待300ms看用户是否再次触摸屏幕，若没有在用户手指离开的位置触发click事件
总结： 击穿的根源在第四步，touchstart事件绑定的监听函数已经让浮层关闭，300ms后在用户手指离开位置触发click事件将点击不到浮层，自然点击到浮层后面的页面元素，出现点击击穿的现象。
6.3 解决办法
- 监听改用click事件替换touchstart事件关闭浮层，就产生导致300ms延迟的判定
- 还是采用touchstart事件进行监听，在touchstar事件里阻止默认事件
Event.preventDefault(),阻止300ms后的click触发 - 异步处理延后浮层关闭事件，添加定时器setTimeout大于等于300ms。
7. 关于1px的实现
7.1 为什么要实现1px
在移动端页面时，border: 1px solid red;，还是会觉得1px太宽不能完美还原设计稿，所以需要实现比1px更细的边框
7.2 实现方式
-
viewport缩放： viewport适配的方案，适配的原理是整个页面放大缩小，当然也包括边线
-
设置0.5px
.item { border-bottom: .5px solid black; /*ios有效 部分android无效*/ } -
伪元素 + transform：iOS/android都有效，缺点处理一条边框还好，如果是4条边框两个伪元素不够得新增标签来实现
.item::after {
content: '';
display: block;
height: 1px;
transform: scaleY(0.5);
background: #black;
position: relative;
top: 13px;
}
-
线性渐变背景: 兼容性好
.item-4-border { margin: 10px 0; padding: 10px; background: linear-gradient(to bottom, #ccc .5px, transparent 0), linear-gradient(to left, #ccc .5px, transparent 0), linear-gradient(to right, #ccc .5px, transparent 0), linear-gradient(to top, #ccc .5px, transparent 0); }
网友评论