android 简介

首先得强调一下H5和移动设备的交互遇到的问题真的是各种丧心病狂但是本主依然还是耐着极大的兴致(无奈)的做了下去。

H5页面在或者IOS上运行出现问题(这里的运行指的是h5的页面运行在App里的里)测试人员或者上级领导那是直接剑指前端人员那是各种嘶声力竭的吐槽和追问。啊为什么会有这些问题你看你写的真是水前端人员一脸憋屈有苦难言一口老血闷在心中。H5页面在移动设备上显示出现问题那问题都是前端人员吗其实并不全是

坑1本主最近在使用这个图表框架用起来确实有些方便但是并不能说它就完美了。虽然说在IOS设备上跑这个是没有问题但是天朝人口太多并不是人手一部的。在这个泛滥每个手机的系统一样又不太一样的时代就被坑了在上Chart.js就异常卡顿。这是不是H5的问题呢只能靠H5优化不全是

SolutionAndroid的WebView做此设置可提高速度webview硬件加速。

WebView.setLayerType(View.LAYER_TYPE_SOFTWARE,null)

就是这么简单Android一句话搞定。还让前端同学去优化一个现有的图表框架那是一件多么丧心病狂的事啊。

坑2还是Android还是SamsungGalaxyS4野蛮的机器强制性的把H5里table的tr的td和th们换行本主只是想让这个数据安静的躺在同一行的为何生生的拆散他们让他们上下相隔不能相见

甚至出现了本来容器设置大小是600px结果容器却变得只有容器内部字体那么高了。

Solution什么原因导致的呢真的只有让前端同学去解决吗NO出现这个在Android的可能原因是Android的webview的settings里setLayoutAlgorithm这个方法做了不恰当的设置。该方面里的值是枚举LayoutAlgorithm它是一个枚举用来控制页面的布局类型有三个值1.NARROW_COLUMNS可能的话使所有列的宽度不超过屏幕宽度2.NORMAL正常显示不做任何渲染3.SINGLE_COLUMN把所有内容放大webview等宽的一列中。

简单粗暴直接移除settings.setLayoutAlgorithm设个方法。

坑3H5在Android手机不得不说SamsungGalaxyS4出现了移位特别是Chart.js制作的图表发生了移位什么意思呢就是说我们在上下滑动一个带图表的页面的时候饼图或者柱状图发生的更大的偏移量直接挪到了上方的文字上。

Solution这个还需前端人员处理了某些手机对元素overflow的支持不是很好就会出现移位所以你需要设置overflow为visible或者不设置overflow就可以解决这个问题。

坑4IOS手机上的问题终于到IOS出问题了IOS问题问题就比较丧心病狂了它对position:fixed的支持不佳所以页面的footer设置了position:fixed后我们在滑动页面的时候footer或者其他元素会出现闪动移位或者消失了。

Solution鉴于IOS对positionfixed的支持不高我们可以换成使用positionabsolute如果要用fixed的话则可以做次设置页面的三个部分headersectionfooter都设置为positionfixed。

相信在H5和App互动日益平凡的今天各种丧心病狂的坑肯定会有很多欢迎大家补充。本骚年在此列举了小小的几个问题希望能够对各位有所帮助有不对的地方还望大神指出改正哦。

标签：h5安卓手机播放完以后有广告