zoukankan      html  css  js  c++  java
  • ipad方案

    let viewTimer = null
    
    function viewPort(userAgent, pageWidth) {
      let oView = document.getElementById('viewport')
      if (oView) {
        document.head.removeChild(oView)
      }
      if (!pageWidth) {
        // 手机页面设计图的宽度,宽度多少设置多少
        pageWidth = 375
      }
      let screenW = parseInt(window.screen.width)
      let scale = screenW / pageWidth
      if (/Android (d+.d+)/.test(userAgent)) {
        let creatMeta = document.createElement('meta')
        creatMeta.name = 'viewport'
        creatMeta.id = 'viewport'
        let version = parseFloat(RegExp.$1)
        if (version > 2.3) {
          creatMeta.content = 'width=' + pageWidth + ', initial-scale = ' + scale + ',user-scalable=1, minimum-scale = ' + scale + ', maximum-scale = ' + scale + ', target-densitydpi=device-dpi'
        } else {
          creatMeta.content = '"width=' + pageWidth + ', target-densitydpi=device-dpi'
        }
        document.head.appendChild(creatMeta)
      } else {
        let creatMeta = document.createElement('meta')
        creatMeta.name = 'viewport'
        creatMeta.id = 'viewport'
        // 判断移动设备横屏竖屏
        if (window.orientation === '-90' || window.orientation === '90') {
          scale = window.screen.height / pageWidth
          creatMeta.content = 'width=' + pageWidth + ', initial-scale = ' + scale + ' ,minimum-scale = ' + scale + ', maximum-scale = ' + scale + ', user-scalable=no, target-densitydpi=device-dpi'
        } else {
          creatMeta.content = 'width=' + pageWidth + ', initial-scale = ' + scale + ' ,minimum-scale = ' + scale + ', maximum-scale = ' + scale + ', user-scalable=no, target-densitydpi=device-dpi'
        }
        document.head.appendChild(creatMeta)
      }
    }
    
    viewPort(navigator.userAgent)
    
    window.onresize = function () {
      clearTimeout(viewTimer)
      viewTimer = setTimeout(function () {
        viewPort(navigator.userAgent)
      }, 500)
    }
    require('./utils/ipad')
  • 相关阅读:
    3.2.1 webpack-dev-server的使用
    打印预览及打印
    2.1.8 webpack的环境
    常用docker 启动
    github镜像
    Log解析
    【Bzoj4555】【Luogu P4091】求和(NTT)
    【Bzoj3527】【Luogu3338】[Zjoi2014]力(FFT)
    FFT实现高精度乘法
    Bzoj 2190 仪仗队(莫比乌斯反演)
  • 原文地址:https://www.cnblogs.com/ronle/p/11451370.html
Copyright © 2011-2022 走看看