美文网首页
移动端适配方案之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>
    

    相关文章

      网友评论

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

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