移动端的适配问题

移动端的适配问题

使用rem 作为单位

1. 使用rem作为单位，rem是根据根元素变化而变化
2. 调用适配main.js(配置根元素)，外加另外配置其他的css元素

html{
font-size:16px;//根元素字体为16px 即1rem = 16px
}

main.js
//动态rem
(function (doc, win) {
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      docEl.style.fontSize = 10 * (clientWidth / 320) + 'px';
    };

  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
  recalc();
})(document, window);

利用@media screen 媒体查询

1. 设置头部 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
2. 利用@media 特性 ，根据其条件使用不用样式 具体看：
   @meidia特性

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
  .class {
    background: #ccc;
  }
}

3.link 不同设备的样式 <link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)

配置不同机型的的样式

var phoneHeight = document.documentElement.clientHeight;//获取当前页面高度
var phoneWidth = document.documentElement.clientWidth;//获取当前页面宽度
if(phoneHeight / phoneWidth <1.48){
$(".classname").css({ position:"absolute",background: "blue" });
}   //短屏
if（1.61< phoneHeight / phoneWidth && phoneHeight / phoneWidth<1.70){
}   //正常屏
if（1.7< phoneHeight / phoneWidth && phoneHeight / phoneWidth<1.83){
}   //长屏
if（phoneHeight / phoneWidth >1.89){
}   //超大屏幕

常见的手机端兼容解决问题

1.手机端通过禁止移动端触屏滑动来解决弹出遮罩层，阻止页面滑动的问题 需要使用e.preventDefault();
2.解决点击遮罩层非内容区域关闭遮罩层的问题，为防止操作内容区域时，发生冒泡事件。需要禁止冒泡 e.stopPropagation()
3.苹果机型回弹背景

//select标签要设置className 为 select
//苹果回弹背景
var boo = true;
$(".select").focus(function () {
  boo = false;
  setTimeout(function () {
    boo = true;
  }, 20)
})
$(".select").blur(function () {
  setTimeout(function () {
    if (boo) {
      $('html,body').animate({ scrollTop: 0 }, 0);
    }
  }, 10)
});
$("input").focus(function () {
  boo = false;
  setTimeout(function () {
    boo = true;
  }, 20)
})
$("input").blur(function () {
  setTimeout(function () {
    if (boo) {
      $('html,body').animate({ scrollTop: 0 }, 0);
    }
  }, 10)
});