wap移动端开发总结

概述最近开发了移动端的项目，的确踩了很多坑，必须记一笔了！ 1、安卓不支持0.5px像素 2、在做换行时需要考虑英文字母（英文连续的字母会被误认为一个单词，从而达不到换行的目的） 解决方式：word-break：break-all； 3、对于页面布局时，对Div进行命名最好加上模块名为前缀，避免直接对标签进行样式改写，易影响全局 4、在移动端实现换行： %one_line{ overflow:

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

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框d出进行编辑，input获得焦点时，d框会上移，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移动端开发总结全部内容，希望文章能够帮你解决wap移动端开发总结所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。