h5开发部分总结

1、后台返回 status 0   前端响应返回  network error

出现原因：前端没访问到后台服务器     跨域或者是链接服务器失败

解决方法：然后台根据实际情况查看该环境 下的日志查找是否报错或者链接后台服务器   看是更改配置还是更换域名

 

2、当进行单行的超出部分添加省略号 的时候遇到了flex布局  text-overflow: ellipsis;无效问题

text-overflow: ellipsis;
overflow-x: hidden;
white-space: nowrap;

这个和布局有关

解决方案是：给单行省略号的模块父级和flex布局的元素添加overflow:hidden布局

建议，虽然flex布局在移动端很好，但是个人觉得还是不要乱用啊。就想接手一个同事的项目，通篇都用flex布局，但是有些本来就是块级元素一行一行堆叠的布局为嘛还要用flex的column布局呢。我觉得是有点画蛇添足的。

3、后台给了一个跳转链接是以https开头的  前端只是负责跳转不带任何的参数   但是呢安卓可以正常进入链接，ios确报错，当将域名改为以http开头的时候  ios和安卓都能正常访问了

原因：链接地址是伪https其实是http，https里面还包裹着一个http请求接口这个请求接口报错导致不能进入到正常页面  所以只要把https 改为http就可以正常使用了

参考：https://blog.csdn.net/u012477117/article/details/52790882

具体的原因可能还要自己深入的研究一下http 和https  在ios、安卓的一些表现形式了

 

4、ios input placeholder 不垂直居中

解决方法：

在ios 下input的placeholder没有垂直显示的原因是因为你使用了line-height这个属性，只要把line-height设置为normal 就可以，若还是有点偏上，可以手动用padding 来调一下,如下：

input::-webkit-input-placeholder{
            padding-top: 2px;
            line-height: normal ;
    }

5、当input框使用ios原生键盘输入值的时候页面被顶上去一部分高度，导致子组件等不能正常显示，头部有部分页面被遮挡问题

解决方法：

监听在input  blur事件，在这个事件中将页面的将页面使用scrollTop让页面顶部展示

 

const scrollTop = document.documentElement.scrollTop ||  document.body.scrollTop;

if(scrollTop >0){

   document.documentElement.scrolllTop = 0;

   document.body.scrollTop = 0

}