前端h5遇到的问题及解决办法

 

以后遇到的问题都记录在这里。

1.由于先有的pc端后需求手机端，所以没有用框架做适配，而是手动媒体查询进行手机端、pad、pc 三端适配，界面比较简单，所以这么做也不复杂，就是坑比较多。

2.移动和pad我查的范围是1024px 到200px之间，用百分比+rem布局。

3.小屏幕的适配是通过一层容器定位实现铺满全屏，但这样做有两个问题 （1）底部链接和备案号 位置的固定 （2） 软键盘弹出会不会挤压界面大小 

4.固定位置的元素我根据情况判断是否需要固定到底部（但我的这种做法不太科学） 是由于我只进行了一层元素的定位固定。然后导致上述问题的出现。

5.解决：  （1）固定的元素要针对上一级固定，用z-index排列显示顺序。（2）软键盘挤压界面，曲线救国的方法，window触发resize事件的时候，隐藏固定在底部的元素。

6.兼容性:  360安全浏览器6.2版本是IE7的内核，样式有变化，表现在  阴影变的很大，input输入框光标位置不对，输入会出现黑×，可见 padding，margin这些没有生效，分析应该是盒模型差异导致的。

   解决：<meta http-equiv="X-UA-Compatible" content="IE=edge">     意思是强制使用最新版本的IE渲染。也试过8,9，但是回到IE浏览器就不行了。

   结合input伪类  input::-ms-clear{ display:none;width:0;height:0}  ::-ms-reveal{display: none;width:0;height:0;}  后边这个清除IE input的叹号。

7.华为某款大屏手机不支持transform：translateX（-50%）   对于这个情况 可以用margin-left：-50%； 解决，这就要考虑元素的宽度了。

8.overflow:hidden 属性在一些新手机上不支持，主要是  oppo r9splus + 锤子手机 这些有IE行为，-ms 修复。

 

转载于:https://www.cnblogs.com/chengyunshen/p/7872657.html