h5适配ios和安卓遇到的坑

1.安卓4.4以下不支持fixed布局。

fixed布局的作用之一就是在手机键盘弹起来的时候，可以自动把页面顶起来。如果不支持的话，换绝对定位也是可以的。但是绝对定位某些机型比如sm-n7508,华为m7上还是没有能顶起来。IOS没有这个问题。

2.小于1px显示问题

部分安卓机器(比如小米)的分辨率低，如果border的宽度小于1px。安卓机出现一种边框消失了的现象。样式上有点奇怪，IOS没有这个问题。

一开始以为是别的元素挡住了，但是调了半天无解。最后突然意识到是不是计算出来的高度有小数导致的。然后马上取整：

   $target.css("height", Math.ceil(maxline * lineHeight));

但是，华为的某些类型的是上面显示不正常，出来一排点点。

再修正一下：

   $target.css("height", Math.ceil(maxline * lineHeight) - 1);

或者用floor。你好奇为什么会有小数高度呢，因为这个功能设计一个折叠，需要重新计算dom的高度。

3.ios键盘挡住输入框。（解决方案再查）

这个发生的频率很高，中文输入法或者输入法切换的时候会遮挡。

解决的办法如下：

    setInterval(function () {         if (document.activeElement.className.indexOf('inputcontent') >= 0) {
            document.activeElement.scrollIntoViewIfNeeded();     }
    }, 300);

这是最管用的办法，inputcontent为输入框的样式。activeElement表示获得焦点的元素。但是这个方法只在app中有用，如果是在浏览器中还是会失效。

4.确保弹出来的是数字键盘

<input type="number" pattern="[0-9]*" />
<input type="password" pattern="[0-9]*" />

只有number或者tel还是不够，只有加入正则，ios才会出现九宫格。

待更新，内容借鉴别人。