最近开发了移动端的项目,的确踩了很多坑,必须记一笔了!
1、安卓不支持0.5px像素
2、在做换行时需要考虑英文字母(英文连续的字母会被误认为一个单词,从而达不到换行的目的)
解决方式:word-break:break-all;
3、对于页面布局时,对Div进行命名最好加上模块名为前缀,避免直接对标签进行样式改写,易影响全局
4、在移动端实现换行:
%one_line{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-all; } //两行 %two_line { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; }
如果没有效果,可以增加内联样式: style={{ WebkitBoxOrient: "vertical" }}
5、在修改之前的样式之前,要先确认好布局以及各种样式和页面之间代码的复用问题,防止牵一发而动全身
6、测试wap端不一定要用手机,还可以直接用微信开发工具去模拟
7、当遇到需要动态计算时,有css的计算属性可以帮忙 calc
8、安卓于IOS存在着一些差异,比如在IOS中,当一个modal框弹出进行编辑,input获得焦点时,弹框会上移,modal点击消失后,页面会出现距离底部的一个下边距
解决方法:
export const isiOS = function () { if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { return true; } return false; } if(isiOS()){ let toFix =e.target.offsetTop; window.scroll(0,toFix) }
9、在给IOS的input框设置边框的时候,上边框可能会多出一条线,导致上边框较粗,此时,只需要设置 -webkit-appearance: none;
10、注意学会使用响应式开发的一些单位:em,rem,px1rem,vh,百分比等