移动端常见问题解决方案

一、特殊样式

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标签设置

适应移动端
不对网站进行缓存
多核浏览器,优先使用最新版本的IE 和 Chrome 内核
添加到主屏幕时隐藏地址栏和状态栏(即全屏)

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

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

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

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

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

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;
    }

})()
 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:共享博客 » 移动端常见问题解决方案

分享到: 更多 (0)
avatar

评论 抢沙发

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活