H5开发中遇到难题解决办法经验汇总

用户交互的接口中，后端除了返回0，其他错误信息需要抛出展示给用户

项目要求页面的title不要显示url，只需要一个空白觉得很简单，设置一个空字符串，document.title = ""不就行了，发现在iphone上可以，android上不行，还是显示url。然后在chrome上做测试，发现空格document.title = " "也不行，document.title = "  "也不行。只好上网找到办法document.title = '\u200E';就可以了。

移动端点击页面中的input输入框，弹出键盘，输入完毕，关闭键盘后，页面不回弹

在移动端的文本框中输入内容，收起键盘后，发现iPhone手机出现页面布局不下滑的问题，而安卓手机是正常的。

解决方案是，当文本框失去焦点后让 window 重新滚动到(0,0)到位置：

移动端，点击输入框，背景图片上移

H5页面设置了背景图片，在移动端，点击input，弹出键盘的时候，背景图片被挤上去了。

在设置背景图片的时候，高度设置成了100%，这样写就会导致键盘弹出的main的height:100%会变成（100%-键盘高度），导致图片被挤压，所以需要强行将main的高度设置为html原本的100%。这样的话即使键盘弹起main的高度还是之前的100%，背景图片也就不会被挤上去了。

...省略号效果的实现，之前是用js代码控制字符串的长度，来做截断，这次试了一下css实现，也不错

修改input的placeholder的颜色

iphone出行页面滑动卡顿

H5页面在安卓设备上滑动的时候很正常，很流畅，但是在iPhone中滚动速度很慢，感觉不流畅，有种卡卡的感觉。上午找了解决方案，很简单，一行代码搞定body {-webkit-overflow-scrolling: touch;}