美文网首页
移动端适配方案之viewport适配

移动端适配方案之viewport适配

作者: 弹指一挥间_e5a3 | 来源:发表于2019-06-16 13:46 被阅读0次

直接上代码,下方width给的数据是基于设计稿给的宽度。

<script>
    const WIDTH = 750
    const mobileAdapter = () => {
      let scale = screen.width/WIDTH
      let content = `width=${WIDTH}, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}`
      let meta = document.querySelector('meta[name=viewport]')
      if(!meta) {
        meta = document.createElement('meta')
        meta.setAttribute('name', 'viewport')
        document.head.appendChild(meta)
      } 
      meta.setAttribute('content', content)
    }
    mobileAdapter()
    window.onorientationchange = mobileAdapter
  </script>

相关文章

  • 移动端适配

    移动端适配 1.适配宽高等问题REM方案:改变页面根部的font-size js方案:通过缩放viewport,达...

  • 移动端适配方案之viewport适配

    直接上代码,下方width给的数据是基于设计稿给的宽度。

  • 移动端适配方案

    移动端适配方案:1)viewport(scale=1/dpr)2)rem3)flex4)vm/vh一、什么是移动端...

  • viewport 适配方案

    viewport 单位得到众多浏览器的兼容,所以目前基于 viewport 的移动端适配方案被各大厂团队所采用。 ...

  • meta-viewport

    相关动态REM的文章 移动端高清、多屏适配方案使用Flexible实现手淘H5页面的终端适配 viewport v...

  • 移动端适配

    移动端适配 dpr、DPI、PPI 视口 移动端适配的方案 微信小程序适配方案 微信小程序开发

  • 移动端是如何做适配的?

    移动端的适配要分为三点来讨论:使用viewport媒体查询动态rem方案 一、使用viewport 也就是使用 ,...

  • 移动端总结

    移动端的适配 一、Viewport视口 用法: 属性:width: 控制Viewport的大小,device-wi...

  • 移动端适配方案 viewport

    背景 今年3月份的时候新入职了一家公司有需求要做自己公司APP上面的小程序。就是类似于微信小程序那种结构。 其中有...

  • 移动端开发(Html+Css)

    placeholder自定义 移动端适配CSS方案 移动端适配方案一 font-size可能需要额外的媒介查询,并...

网友评论

      本文标题:移动端适配方案之viewport适配

      本文链接:https://www.haomeiwen.com/subject/tyqgfctx.html