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