踩坑
- 列表滚动,在部分 ios 手机上被截断,解决办法
.small-nav-outer{
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
overflow-x: hidden;
}
.small-nav-inner{
min-height: calc(100% + 1px);
}
在父元素的内部添加一个包裹的div,.small-nav-inner,让他的高度高于父元素1px,然后给父元素添加 -webkit-overflow-scrolling: touch;属性,这样可以令一开始的时候就添加一个scrollView。
如此,ios上的兼容性问题得以解决。 - 部分旧版ios不支持scrollTo , 可以使用scrollTop=值,或者 scrollIntoView()
- 部分旧版ios监控scroll事件,非常迟缓,不灵活,可以结合touchmove使用
- 注意刘海屏兼容!有的机器有上刘海,有的机器有底部刘海,ios 可以直接配置meta,然后使用env,
如:margin-bottom: env(safe-area-inset-bottom);
安卓机只能写死个估计值啦,80-110px,或者app的客户端告诉我们,或者通过window.devicePixelRatio 按比例动态计算一个(也是估计值) - vue 一个v-for循环下,img src绑定的路径变量无法渲染
因为指向本地‘…/…/’的相对路径,webpack不识别,
解决办法:绑定class变量,图片用做背景展示 - 安卓机按钮元素text 偏下,无法上下居中
解决办法:1、设置line-height大于height,往下移,当然不能大太多,否则ios会靠上
2、不设置height,line-height,使用padding撑开 - 微信分享链接的url或授权回调的url丢参数,部分参数会被截取掉用&拼接的第二、第三和之后的参数,#后边的参数也可能会丢
解决办法:1、使用encodeURIComponent、decodeURIComponent转码
2、改用history模式,history模式没有#号 - node 不要安装最新版,要安装稳定版,否则很多插件会存在版本不支持的问题
- 多页面多入口的项目,单个模块采用history模式,devServer下要配置historyApiFallback
- 可以在app以外打开的连接跳转,最好做域名非法校验,防止被注入外跳,
例如可以比较即将跳转的连接中是否有域名,域名跟location的域名是否相同
let rg = /(http[s]?:\/\/([\w-]+.([A-Za-z0-9-])+.([a-z\.]{2,6})))/gi; if(url.match(re)[0] != location.origin){}
- 还有一种外跳是@形式的,如:https://www.cnblogs.com@baidu.com, 复制到浏览器试试就懂啦
- z-index 不好用时可以使translateZ,用法 transform: translateZ(1px);
开发中常用知识点
-
getBoundingClientRect :
document.querySelector(’.list’).getBoundingClientRect().top
某个元素相对可视区的距离,含top,left,bottom,right属性 -
window.scrollTo:滚动到指定位置,
用法:window.scrollTo({top,left,behavior}) -
background-size: contain 和100% 的区别
contain:图片不变形不隐藏,以 height/weight 中最短边为标准展示
100%:以最长边拉伸图片,可能短边会展示不全;
background 属性可以全部拼在一起写
例:background: #00FF00 url(bgimage.gif) no-repeat top center / 30px 30px; -
background-attachment有三个值,
scroll是默认值,背景图像会随着页面其余部分的滚动而移动。
fixed当页面的其余部分滚动时,背景图像不会移动。视差滚动就可以用这个去实现
inherit规定应该从父元素继承 background-attachment 属性的设置。 -
flex布局很重要,
flex-direction,justify-content,align-items,flex-wrap最好背下来 -
防止手机中网页放大和缩小,设置meta中的viewport,
user-scalable=0,或,user-scalable=no 都可以,
eg:<meta name="viewport" content="user-scalable=0" />
常用设置:<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
-
标签调起拨打手机号:
<a href=”tel:110120119”>可以实现手机拨号</a>
-
标签调起发送邮件:
<a href=”mailto:ming.zhou@nowcoder.com”>发送邮件</a>
-
字体抗锯齿渲染:
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
,使字体看起来会更清晰舒服 -
vue mixins
混入:mixins: [mixin], 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能,data/生命周期函数/methods函数等都可以混入 -
尽量减少if-else嵌套
,适当使用array.find,array.findIndex,array.every等方法
暂时贴出这么多,有想到其他的欢迎留言,我们一起补充 ……^^