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

wap移动端开发总结

猜你喜欢