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')
  • 相关阅读:
    docker映射端口无法访问
    Tomcat日志分析
    linux服务器性能测试
    mysql库表结构对比工具
    网络基础知识,不懂看这里
    Python之redis、mysql进程守护
    linux文件查找工具
    nginx解决跨域问题
    redis插入单个较大的键值
    linux系统安全巡检脚本
  • 原文地址:https://www.cnblogs.com/ronle/p/11451370.html
Copyright © 2011-2022 走看看