移动端常见问题解决方案

一、特殊样式

css3盒子模型

box-sizing:border-box;
-webkit-box-sizing:border-boxx

清除点击高亮，设置transparent 完成透明

-webkit-tap-highlight-color:transparent;

取消ios里Button、Input上的默认样式

-webkit-appearance:none;

禁用长按页面时的弹出菜单

通常当你在手机上长按图像 img ，会弹出选项 存储图像 或者 拷贝图像，若不想让用户这么操作，可以设置方法来禁止：

img, a {-webkit-touch-callout: none;}

H5页面input type='num'时去掉右边的上下箭头

/*谷歌*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
    -webkit-appearance:none !important;
}
/*火狐*/
input[type="number"] {
   -moz-appearance: textfield;
}

二、功能代码片段

禁止文本缩放

当移动设备横竖屏切换时，文本的大小会重新计算，进行相应的缩放，当我们不需要这种情况时，可以选择禁止：

html {
    -webkit-text-size-adjust: 100%;
}

禁止选中内容

如果你不想用户可以选中页面中的内容，那么你可以禁掉

html {
   -webkit-user-select: none;
   user-select: none;
}
.xxx{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

body初始化样式

body{
  width:100%;
  min-width:320px;
  max-width:750px;
  margin:0 auto;
  font-size:14px;
  background:#fff;
  line-height:1.5;
}

动态获取html根字体大小

//注意为html添加id='htmlFt'
;(() => {
  function autoResize() {
      document.getElementById('htmlFt').style.fontSize =
      (100 / 750) * window.innerWidth + 'px'
  }
  autoResize()
  window.onresize = function () {
      autoResize()
  }
})()

样式初始化css：
normalize.css - 官网下载
normalize.css - github

三、meta标签设置

适应移动端

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

不对网站进行缓存

<meta http-equiv="Pragma" content="no-cache">

多核浏览器,优先使用最新版本的IE 和 Chrome 内核

<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />

添加到主屏幕时隐藏地址栏和状态栏（即全屏）

当我们将一个网页添加到主屏幕时，会更希望它能有像 App 一样的表现，没有地址栏和状态栏全屏显示，代码如下：

<meta name="apple-mobile-web-app-capable" content="yes" />

该方案在 iOS 和 Android5.0+ 上都通用。

添加到主屏幕时设置系统顶栏颜色

当我们将一个网页添加到主屏幕时，还可以对系统显示手机信号、时间、电池的顶部状态栏 颜色进行设置，前提是开启了：

<meta name="apple-mobile-web-app-capable" content="yes" />

有了这个前提，你可以通过下面的方式来进行定义：

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

content只有3个固定值可选：default | black | black-translucent

• 如果设置为 default，状态栏将为正常的，即白色，网页从状态栏以下开始显示；
• 如果设置为 black，状态栏将为黑色，网页从状态栏以下开始显示；
• 如果设置为 black-translucent，状态栏将为灰色半透明，网页将充满整个屏幕，状态栏会盖在网页之上；
  该设置只在 iOS 上有效。

遮罩层滚动问题

在有遮罩层的情况下，遮罩层下方的内容依然可以透过遮罩层滚动，因此要取消这种操作

(function(){
    var scrollTop = 0;
    // 显示弹出层
    $('.open').click(()=>{
      // 在弹出层显示之前，记录当前的滚动位置
       scrollTop = getScrollTop();
       $('.workflow-modal').fadeToggle()
       $(".workflow-container").slideToggle()
       // 把脱离文档流的body拉上去！否则页面会回到顶部！
       document.body.style.top = -scrollTop + "px";
       stop()
    })
    //关闭遮罩层
    $('.close').click(()=>{
        $(".workflow-container").slideToggle()
        $('.workflow-modal').fadeToggle()
        move()
        // 回到老地方
        to(scrollTop);
    })

  /***禁止滑动***/
  function stop() {
      document.documentElement.style.position = 'fixed';
      document.body.style.overflow = 'hidden'; //隐藏滚动条
  }
  /***取消滑动限制***/
  function move() {
      document.documentElement.style.position = 'static';
      document.body.style.overflow = ''; //出现滚动条
  }
  /*遮罩层出现之前记录当前滚动位置*/
    function getScrollTop() {
      return document.body.scrollTop || document.documentElement.scrollTop;
    }
  /**遮罩层消失滚回到原来的位置**/
  function to(scrollTop) {
      document.body.scrollTop = document.documentElement.scrollTop = scrollTop;
    }

})()