移动端开发实战经验

这是最近在移动端web-view中开发app时实际碰到的一些比较棘手显而易见的问题的小总结.

首先说说问题的表现形式.

有一天, 安卓开发人员拿来一部魅族手机, 给我展示了一下我写的html页面中出现比较奇怪的问题,
就是用highcharts画图画的图的高度变得十分诡异, 当时的表现是无限大. 然后也给我看了一些页面, 明明设计居中的元素并不居中了, 当下完全不知道是何原因, 一度怀疑是引入了rem造成了有些浏览器不兼容的原因, 也怀疑是不是highcharts不兼容, 对于第一个怀疑, 很快就排除了, 因为其他地方也有用rem做高度单位的, 但是并没有类似的问题, 对于第二个怀疑也很快排除了, highcharts是用纯js实现的插件, 一般不会有兼容问题, 那么是什么原因呢 . 于是 我开始在调用highcharts画图之前查看图像容器的高度, 发现是0, 可是明明设置了高度, 为什么还是0呢 ? 分别在css中和js中再次确认设置height后还是无效, 疑似某些安卓系统的web-view渲染 页面时不能识别height, 如何替代呢, 经过无数次的试验, 发现如果设置height无效, 还需设置min-height

同样发现margin-left 和 margin-right 也经常无效, 因为设置了这两个属性的值为auto后, 并不能使一个block元素居中, 而且更有甚者, 如果想用border-radius属性画圆, 则 margin-right的值会加到宽上, 导致画的圆都是椭圆, 不能居中的那一点, 现在想要的方案是设置一个外容器, 给它设置text-align: center 并让需要居中的容器本身的display设置为inline-block.

移动端的开发遇到了很多坑, 一个个发现再解决吧 .