H5页面在移动端的兼容问题

本文首发我的简书

论移动端的问题，其实我碰到的很多都在ios端，本来一个页面在安卓手机上跑得好好的，测试小哥突然抛个bug——ipnone7测试样式需要优化之类的，每次拿到这些问题，都更加坚定了我不想用苹果手机的决心…，下面我就将这些曾经困扰我的问题一一道来。
1. 在ios上可以改变键盘类型从而输入非数字(本来期望只能填入数字)
解决办法：
1>如果只需要输入整数的话可以直接使用这个号码盘式的键盘可以保证ios与安卓端均不能切换键盘类型。
2>如果需要输入的数字带有小数的话，目前我的解决办法只有先用type=number然后在表单提交的时候对input的value值进行正则判断了。（安卓即使切换了输入类型也只能输入数字，万恶的ios…）
2. 当设置type=number时maxlength,minlength无效(仅限ios…)
解决方法：同样在表单提交的时候先使用正则判断一下。
3. input的placeholder偏上，同样仅限ios
解决办法：使input的字体大小大于等于 placeholder的字体大小，例如

input {
    background-color: #f4f4f4;
    font-size: 0.14rem;
    color: #7f7f7f;
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    font-size:0.14rem;/*小于等于0.14rem即可*/
    color: #b2b2b2;
}

4.上传图片/文件失败后无法再次上传同一个文件(不限于移动端)
解决办法：
首先获取到传入文件的参数event(onchange方法的回调函数的参数event，在vue中则是@change的参数$event)
event打印出来是这样的

然后在每次向后台上传的时候首先执行event.target.value = ''即可。
5. 文字偏上(ios)
ios经常会出现button里面的文字偏上，还有类似于 “联系电话：xxxxxxx”xxxxx这一部分偏上的情况。
解决方法：
1>设置整行的height或者min-height与line-height保持相等，这个方法对于像 联系电话：xxxxx这样的还是有效的，但是对于按钮这样的可能没有效果。
2>直接使用flex布局，专治各种疑难杂症（ios低版本注意加前缀-webkit-）

.btn{
        display:flex;
        flex-direction:column;/*对于button可以使用column，像label-content这种形式还是使用row吧*/
        align-items: center;
        justify-content: center;
}

6.较长的文字在安卓端一行显示，在ios会另起一行（在下一行显示）
解决方法：ios端有个词叫做“安全区域”，可以理解为系统内置的padding，既然这样，我们就把这一行放文本元素的宽度改小一点吧（看起来旁边会有些留白）
ps：1.这个问题可能不一定是安全区域的影响（查阅资料发现安全区域貌似是ios11才出来的，而我在使用同事的5s（ios9.3）测试的时候，也出现了该问题，所以就理解成ios有内置的padding吧）。
2.这个问题的出现可能是ui设计存在一定的考虑不周（右侧没有设置padding）
7. 时下流行的刘海屏适配问题
解决方法：
1>如果是在app里面的话还是交给原生去做好一些
2>web app的话貌似浏览器应该会适配好了吧。。。
3>实在要前端适配的话可以参考 关于H5页面在iPhoneX适配 (我自己没试过)