wap移动端开发总结

最近开发了移动端的项目,的确踩了很多坑,必须记一笔了!

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,百分比等

 

上一篇:springboot-log4j启动异常(java.lang.AbstractMethodError)


下一篇:如何实现wap php网站访客手机号码抓取功能