移动端的一些坑

最新推荐文章于 2023-08-14 15:48:02 发布

原创最新推荐文章于 2023-08-14 15:48:02 发布 · 230 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5

前端路上的磕磕绊绊专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了如何使用rem布局进行响应式设计，特别是在不同屏幕尺寸下的适配策略。探讨了在Vue项目中实现rem布局的方法，以及解决iOS设备上的特定问题，如点击高亮、滑动流畅性和动态遮罩层的实现。

rem布局

 /*1rem大小的设置，1rem=100px*/
  html {
    font-size: 80px;
    height: auto;
  }
  @media screen and (min-width: 320px) {
    html {
      font-size: calc(563% + 10 * (100vw - 320px) / 39);
      font-size: calc(90px + 10 * (100vw - 320px) / 39);
    }
  }
  @media screen and (min-width: 375px) {
    html {
      font-size: calc(625% + 20 * (100vw - 375px) / 39);
      font-size: calc(100px + 20 * (100vw - 375px) / 39);
    }
  }
  @media screen and (min-width: 414px) {
    html {
      font-size: calc(625% + 20 * (100vw - 414px) / 186);
      font-size: calc(100px + 20 * (100vw - 414px) / 186);
    }
  }
  @media screen and (min-width: 600px) {
    html {
      font-size: calc(1000% + 40 * (100vw - 600px) / 425);
      font-size: calc(160px + 40 * (100vw - 600px) / 425);
    }
  }
  /*增加这个阶段适配iPad Pro*/
  @media screen and (min-width: 1000px) {
    html {
      font-size: calc(1000% + 40 * (100vw - 600px) / 250);
      font-size: calc(160px + 40 * (100vw - 600px) / 250);
    }
  }
  @media screen and (min-width: 2000px) {
    html {
      font-size: calc(1250% + 60 * (100vw - 1000px) / 1000);
      font-size: calc(200px + 60 * (100vw - 1000px) / 1000);
    }
  }

当在vue项目中有 PC页面 也有 H5页面 的时候

~~不能将这段代码写在全局共用的css里面~~
- 因为会影响pc页面
~~也不能写在单独的页面的style里面~~
- 受 scoped 的影响无法生效
将这段代码写在不受编译的static目录下，并且通过 appendChild 添加元素到微信网页上

  let head = document.getElementsByTagName('head')
  let meta = document.createElement('meta')
  let link = document.createElement('link')
  link.href = '/static/static-mobile.css'
  link.rel = 'stylesheet'
  link.type = 'text/css'
  meta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, maximum-scale=1.0, user-scalable=no'
  head[0].appendChild(meta)
  head[0].appendChild(link)

ios若元素有点击事件，点击的时候背景会变灰

需要在css中设置

  * {
      -webkit-tap-highlight-color:rgba(0,0,0,0);
  }

伪类边框

.box:after{  
    background: #E5E5E5;
    content: "";
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 0.15rem;
    width: 100%;
}

ios 滑动不流畅

在需要滚动的框元素内增加如下css

.box{
      -webkit-overflow-scrolling: touch;
      overflow-scrolling: touch;
}

addRule 在页面样式表内添加样式

addRule 需要添加之前没有的样式，如果在css中存在的样式则无法修改

  // 第一个参数是元素的clsss或者id或者其他，第二个参数是修改的样式
  document.styleSheets[0].addRule('.region__title::after', 'left: 10px')

微信网页，动态添加遮罩层，出现后禁止滑动页面

  // 在watch监听器中， visible控制弹出框显示隐藏
  visible (val) {
      let app = document.getElementById(this.targetId)
      function bodyScroll (event) {
          event.preventDefault()
          event.stopPropagation()
      }
      let child
      if (val) {
          let div = document.createElement('div')
          div.id = 'mask'
          app.appendChild(div)
          child = document.getElementById('mask')
          child.addEventListener('touchmove', bodyScroll)
      } else {
          child = document.getElementById('mask')
          child.parentNode.removeChild(child)
      }
  }

将事件添加在动态添加的mask元素上，不用removeEventListener移除事件，因为在弹出框消失的时候mask就会被销毁，事件就没啦。