移动端常见兼容性问题(二)

2019-04-27 css 阅读量

之前的文章写了一些移动端常见的兼容性问题，本文将继续总结一些兼容问题的解决套路。

fixed 定位问题

主要代码：

<style>
//红框部分
.city{
  position:fixed;
  top:50px;
  height:300px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  z-index:100;
}
</style>
<body>
  //绝对定位
  <header></header>
  //下半部分绝对定位
  <div>
    //红框部分
    <div class="city"></div>
  </div>
</body>

bug 描述：

1.在安卓机上，红框部分，超过的文字，无法通过滑动查看 2.在 ios 上，红框部分会随下半部分一起滚动。

bug 解决：

<style>
//红框部分
.city{
  position:fixed;
  top:50px;
  //把高度去掉，改为Bottom
  bottom:50px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  z-index:100;
}
</style>
<body>
  //绝对定位
  <header></header>
  //下半部分绝对定位
  <div>
  </div>
  //将红框部分移出
  <div class="city"></div>
</body>

ios 后台倒计时停止

主要代码：

var count = 30;
var inter = setInterval(clock, 1000);
function clock() {
  count--
  if (count < 1) {
    clearInterval(inter);
  }
}

bug 描述：

ios 切换到后台程序后，倒计时就停止了

bug 解决：

var old = new Date().getTime();
var count = 30;
var inter = setInterval(clock, 1000);
function clock() {
  //计时器实时计算当前时间
  var now = new Date().getTime();
  var count = 30 - Math.floor((parseInt(now) - parseInt(old)) / 1000);

  $(".clock").html(count);
  if (count < 1) {
    clearInterval(inter);
  }
}

采用实时计算时间差的方式解决，具体效果可看倒计时测试

ios input disabled 灰色

bug 描述：

ios 下输入框为 disabled 时，默认字体为灰色

bug 解决：

1
2
3

input:disabled,textarea:disabled{
  -webkit-opacity:1;
}

华为、小米键盘遮住输入框

主要代码：

<style>
body{
  height:100%;
}
.main{
  top:0;
  bottom:0;
  left:0;
  right:0;
  background-image:cover;
  overflow:auto;
  position:absolute;
}
</style>
<body>
  <div class="main">
  //里面的所有输入框为自然布局
  </div>
</body>

bug 描述：

点击页面较下面的输入框，键盘会遮挡输入框，且无法上拉页面。

bug 解决：

方法 1：可以上拉页面看到输入框

<style>
.main{
  height:100%;
  background-image:cover;
  overflow:auto;
}
</style>

方法 2：可以自动顶起输入框

(function(){
  var screenH=$(document).height();
  $('input').focus(function(){
      var top = $(this).offset().top;
      var h=$(this).height();
      if(top+h>screenH/2){
        var scrollTop = $("滚动主体").scrollTop();
        $("滚动主体").append("<div class='addHeight'></div>");
        $(".addHeight").css('padding-bottom',screenH/2+'px');
        $("滚动主体").scrollTop(screenH/2+screenTop-20);
      }
  });
  $('input').blur(function(){
      if($(".addHeight").length>0){
          $(".addHeight").remove();
      }
  });
})();

ios 键盘挡住输入框

主要代码：

<style>
  header {
      height: 50px;
      background-color: red;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      position: absolute;
  }
  .content {
      top: 50px;
      left: 0;
      right: 0;
      bottom: 0;
      padding-bottom: 50px;
      overflow: auto;
      position: absolute;
      background-color: green;
  }
  .bottom {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 50px;
      background-color: red;
  }
</style>

<body>
  <header>头部</header>
  <div class="content">
  <input type="text" />
  </div>
  <div class="bottom">我是固定在底部的按钮</div>
</body>

bug 描述：

点击图中圈出的黄色输入框，键盘会遮住输入框，无法上弹

bug 解决：

<style>
  .content {
      top: 50px;
      left: 0;
      right: 0;
      bottom: 50px;
      <!-- padding-bottom: 50px; -->
      overflow: auto;
      position: absolute;
      background-color: green;
  }
</style>

部分 Ios 手机不支持 css:focus:valid

bug 描述：

当给输入框加属性 required 的时候，用:focus:valid 加样式，部分手机不支持。但是单独支持:focus/:valid。

bug 解决：

用 js 判断，加样式。

ios 光标上下飘

滚动部分{
  -webkit-overflow-scrolling:touch;
  overflow:auto;
}

bug 描述：

当两个样式并存时，拖动正在输入的页面，光标就会上下飘动。

bug 解决：

目前找到原因是因为这两个样式并存会导致。目前没有找到好的解决办法

IOS 点击闪屏问题

bug 描述：

点击页面，会出现闪屏现象

bug 解决：

1
2
3

html,body{
  -webkit-tap-highlight-color: transparent;
}