移动端H5页面兼容性问题小结

1. input框边框的在ios下颜色变淡问题

input:disabled{

　border: 1px solid #017BBA;

　-webkit-opacity:1;

opacity: 1;

}

2. iphone7下横屏之后字体变大

　　css中加入以下代码：

@media screen and (max-device-width: 320px){body{-webkit-text-size-adjust:100%}}

@media screen and (max-device-width: 480px){body{-webkit-text-size-adjust:100%}}

@media only screen and (-webkit-min-device-pixel-ratio: 2){body{-webkit-text-size-adjust:100%}}

如何没有效果，就单独在标签上设置样式 -webkit-text-size-adjust:100%

3. H5页面禁止横屏　

uc浏览器强制竖屏

QQ浏览器强制竖屏

iphone safari浏览器没有查到可以使用meta，以上应该会有兼容性问题（没有测），我是使用的是js方法，当横屏的时候显示一个页面，告诉用户“为了您的良好体验，请使用竖屏”

js方式

 1 (function rotate(){
 2     var orientation=window.orientation;
 3     var pd = null;
 4     function createPd(){
 5         if(document.getElementById(\'preventTran\') === null){
 6              var imgData = \'data:image/png;base64,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\';
 7              pd = document.createElement(\'div\');
 8              pd.setAttribute(\'id\',\'preventTran\');
 9              pd.style.position = \'fixed\';
10              pd.style.left = \'0\';
11              pd.style.top = \'0\';
12              pd.style.width = \'100%\';
13              pd.style.height = \'100%\';
14              pd.style.overflow = \'hidden\';
15              pd.style.backgroundColor = \'#2e2e2e\';
16              pd.style.textAlign = \'center\';
17              pd.style.zIndex = \'99999\';
18              document.getElementsByTagName(\'body\')[0].appendChild(pd);
19              var img = document.createElement(\'img\');
20              img.src = imgData;
21              pd.appendChild(img);
22              img.style.margin = \'60px auto 30px\'
23              var br = document.createElement(\'br\');
24              var p = document.createElement(\'p\');
25              p.style.width = \'100%\';
26              p.style.height = \'auto\';
27              p.style.fontSize = \'18px\';
28              p.style.color = \'#626262\';
29              p.style.lineHeight = \'22px\';
30              p.style.textAlign = \'center\';
31              p.innerHTML = \'为了您的良好体验\';
32              p.appendChild(br);
33              p.innerHTML += \'请将手机竖屏操作\';
34              pd.appendChild(p);
35          }
36     }
37     var domArr = $(\'body\').children().not(\'script\').not(\'#preventTran\');
38     if(orientation==90||orientation==-90){
39          if(pd == null && document.getElementById(\'preventTran\') === null) createPd();
40          document.getElementById(\'preventTran\').style.display = \'block\';
41        // 以下代码为了解决横屏显示时出现用户依旧可以看到页面并且页面可以滑动
42          for(var i = 0; i < domArr.length; i++){
43              if($(domArr[i]).is(\':visible\')){
44                  if(!$(domArr[i]).children("canvas")){
45                     $(domArr[i]).addClass(\'rotateScreenClass\');
46                  }
47                 
48              }
49          }
50         
51        
52       
53     }else{
　　　　　　　　// 以下代码为了解决横屏显示时用户依旧可以看到页面并且可以滑动页面问题
54         for(var i = 0; i < domArr.length; i++){
55             if($(domArr[i]).hasClass("rotateScreenClass")){
56                 $(domArr[i]).removeClass(\'rotateScreenClass\');
57             }
58         }
59     }
60     window.onorientationchange=function(){
61        if(pd == null && document.getElementById(\'preventTran\') == null) createPd();
62        document.getElementById(\'preventTran\').style.display=\'none\';
63        rotate();
64     };
65  })();

css中需添加一个样式：

.rotateScreenClass{

display: none;

}

4. ORC上传身份证正反面时，如果用户手机水平与地面拍照时，横屏或者竖屏拍身份证会出现上传的图片显示不正常（还没解决。。。）

　　试过的方法：引入exif.js,获取到Orientation的值，根据Orientation的值进行判断旋转

　　此种方法适用于手机垂直或与地面有角度时，即当手机水平与地面拍照时，是没有横屏和竖屏之分的，没有办法判断方向

5 . 待续