记录移动端开发坑点(持续更新)

1.需要固定头部或者底部的时候,由于ios的fixed定位失效,可选择使用flex布局,最外层盒子,body,html高度为100%,需要固定的盒子给指定高度,剩下的flex:1就可以失效fixed效果,其次,如果需要滚动,可以给需要滚动的盒子加一层div,高度小于需要滚动的盒子高度即可。
2.每次点击需要把盒子的高度滚动到底部,把盒子高度赋值给盒子的滚动高度即可。scrolltop = height即可。
3.ios需要把软键盘换行文本跟换成搜索文本的时候,需要把input包上一层form表单,input的type设置为search即可,提交的时候回刷新页面,使用window.event.returnValue = false;即可阻止刷新
4.图片等比例缩放,可以给img包上一层div,div设置宽高,img使用max-height=100%,max-width=100%,即可等比例缩放。
新更新
5.当使用input输入聚焦的时候,给html设置fixed定位阻止页面滚动以及滚动穿透的时候,input失去焦点的时候,ios会产生页面白屏一瞬间,如何解决?判断失去焦点的时候取消fixed定位即可。
6.ios使用文字渐变的时候需要加上才能生效
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
7.ios有时候使用$router.back()失效,可使用$router.push()即可。大概是因为公司测试环境网络问题

相关推荐