vue项目处理dpr和多屏幕适配问题
<!DOCTYPE html>
<html style="font-size:37.5px">
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no" >
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style">
<!--<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">-->
<title>快问中医</title> <style>
html { /*消除click 300ms延迟*/
touch-action: manipulation;
}
html, body {
height: 100%;
width: 100%;
/*max-width: 580px;*/
margin: 0 auto;
overflow-x: hidden;
overflow-y: hidden;
background-color: #F0F0F0;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif !important;
} * {
box-sizing: border-box;
}
</style>
<!-- 淘宝flexible方案 -->
<script>
(function (win, lib) {
var doc = win.document
var docEl = doc.documentElement
var metaEl = doc.querySelector('meta[name="viewport"]')
var flexibleEl = doc.querySelector('meta[name="flexible"]')
var dpr = 0
var scale = 0
var tid
var flexible = lib.flexible || (lib.flexible = {}) if (metaEl) {
console.warn('将根据已有的meta标签来设置缩放比例')
var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/)
if (match) {
scale = parseFloat(match[1])
dpr = parseInt(1 / scale)
}
} else if (flexibleEl) {
var content = flexibleEl.getAttribute('content')
if (content) {
var initialDpr = content.match(/initial\-dpr=([\d\.]+)/)
var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/)
if (initialDpr) {
dpr = parseFloat(initialDpr[1])
scale = parseFloat((1 / dpr).toFixed(2))
}
if (maximumDpr) {
dpr = parseFloat(maximumDpr[1])
scale = parseFloat((1 / dpr).toFixed(2))
}
}
} if (!dpr && !scale) {
var isAndroid = win.navigator.appVersion.match(/android/gi)
var isIPhone = win.navigator.appVersion.match(/iphone/gi)
var devicePixelRatio = win.devicePixelRatio
// if (isIPhone) {
// // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
// if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
// dpr = 3;
// } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
// dpr = 2;
// } else {
// dpr = 1;
// }
// } else {
// // 其他设备下，仍旧使用1倍的方案
// dpr = 1;
// }
dpr = 1
scale = 1 / dpr
} docEl.setAttribute('data-dpr', dpr)
if (!metaEl) {
metaEl = doc.createElement('meta')
metaEl.setAttribute('name', 'viewport')
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no')
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(metaEl)
} else {
var wrap = doc.createElement('div')
wrap.appendChild(metaEl)
doc.write(wrap.innerHTML)
}
} function refreshRem () {
var width = docEl.getBoundingClientRect().width
if (width / dpr > 540) {
width = 540 * dpr
}
var rem = width / 10
docEl.style.fontSize = rem + 'px'
flexible.rem = win.rem = rem
} win.addEventListener('resize', function () {
clearTimeout(tid)
tid = setTimeout(refreshRem, 300)
}, false)
win.addEventListener('pageshow', function (e) {
if (e.persisted) {
clearTimeout(tid)
tid = setTimeout(refreshRem, 300)
}
}, false) if (doc.readyState === 'complete') {
// doc.body.style.fontSize = 12 * dpr + 'px';
doc.body.style.fontSize = 16 + 'px'
} else {
doc.addEventListener('DOMContentLoaded', function (e) {
// doc.body.style.fontSize = 12 * dpr + 'px';
doc.body.style.fontSize = 16 + 'px'
}, false)
} refreshRem() flexible.dpr = win.dpr = dpr
flexible.refreshRem = refreshRem
flexible.rem2px = function (d) {
var val = parseFloat(d) * this.rem
if (typeof d === 'string' && d.match(/rem$/)) {
val += 'px'
}
return val
}
flexible.px2rem = function (d) {
var val = parseFloat(d) / this.rem
if (typeof d === 'string' && d.match(/px$/)) {
val += 'rem'
}
return val
} })(window, window['lib'] || (window['lib'] = {}))
</script>
<!-- 环境判断:测试、正式 -->
<script>
var host = window.location.host
;(function isFormalEnv(host){
if(host.indexOf('kw13.cn') !== -1){
window.isFormalEnv = true
window.isTestEnv = false
} else if(host.indexOf('kwmzy.com') !== -1) {
window.isTestEnv = true
window.isFormalEnv = false
}
})(host)
</script>
<!-- 腾讯移动统计配置 -->
<script>
var mtah5 = {}
if(window.isFormalEnv){
mtah5.sid = 500411881
mtah5.cid = 500432840
} else { // 本地、测试环境使用
mtah5.sid = 500412096
mtah5.cid = 500426037
}
var _mtac = {"performanceMonitor":1,"senseQuery":1};
(function() {
var mta = document.createElement("script");
mta.setAttribute("name", "MTAH5");
mta.setAttribute("sid", mtah5.sid);
mta.setAttribute("cid", mtah5.cid);
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(mta, s);
})();
</script>
<script>
window.origin = window.location.origin
</script>
</head>
<body>
<div id="app"><!-- built files will be auto injected --></div> </body>
</html>
vue项目处理dpr和多屏幕适配问题的更多相关文章
- vue移动端h5页面根据屏幕适配的四种方案
最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心.下次想起来了的话,进行总结分享一下如何处理.在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块 ...
- android 屏幕适配1 ——dimens.xml的适配
1.如果是才开始做项目,已经有设计图:720*1280 1).默认values文件夹:1dp=1px values/dimens_x.xml: name: x1~x720 value:1px~72 ...
- 论坛源码推荐（11.6）：iPhone6/6 plus屏幕适配Demo，Java代码转Objective-C
http://www.cocoachina.com/ios/20141106/10153.html iPhone6/6 plus 屏幕适配Demo(代码底层处理)(论坛会员satian)htt 该项目 ...
- 转：如何在Vue项目中使用vw实现移动端适配
https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...
- 在Vue项目中使用vw实现移动端适配
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
- 如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
- 如何在Vue项目中使用vw实现移动端适配
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在< 使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着 viewport 单位 ...
- Vue项目中使用vw实现移动端适配
我们在vue移动端项目中的适配一般都采用rem,但是rem也不是能兼容所有的终端. 随着viewport单位越来越受到众多浏览器的支持,下面将简单介绍怎么实现vw的兼容问题,用vw代替rem 当我们采 ...
- Vue项目屏幕自适应方案
安装lib-flexible cnpm i lib-flexible -D Vue项目引入 lib-flexible. main.js: import 'lib-flexible/flexible' ...
随机推荐
- Django基础八之认证模块---auth
Django基础八之认证模块---auth 目录 Django基础八之认证模块---auth 1. auth介绍 2. autho常用操作 2.1 创建用户 2.2 验证用户 2.3 验证用户是否登录 ...
- Debian11系统安装
镜像下载.域名解析.时间同步请点击 阿里云开源镜像站 1. 启动镜像 启动镜像,进入安装界面,默认选择第一个图形化安装界面,回车 2. 选择语言 这里选择English语言,然后点击Continue ...
- Activemq特性之持久化--LevelDB特性
LevelDB持久性适配器使用LevelDB作为高性能的消息存储.它是一个基于文件的存储库,它使用了Google的LevelDB,将索引保存到包含消息的日志文件中.它经过优化,提供了比KahaDB更快 ...
- [转载]详解ssh端口转发(二)
关于使用ssh portforwarding来进行FQ的操作,网络上已经有很多很好的文章,我在这里只是画两个图解释一下. 首先要记住一件事情就是: SSH 端口转发自然需要 SSH 连接,而 SSH ...
- 类型转换Java day8
类型转换自动类型转换 从同种类型的低字节类型值直接转换到高类型字节值的转换可自动转换 类型自动转换示例 byte a = 20; int b = a;//不报错可正常转换 有些类型它在计算时默认以指定 ...
- bzoj2989 数列(KDTree)
bzoj2989 数列(KDTree) bzoj 该说不愧是咱,一个月才水一篇题解然后还水的一批 题目描述: 给定一个长度为n的正整数数列a[i]. 定义2个位置的graze值为两者位置差与数值差的和 ...
- IDEA使用Docker插件构建镜像
IDEA使用Docker插件构建镜像 记一次坑 第一次插件docker-maven-plugin的 配置文件中没写远程主机的地址 <dockerHost>http://192.168.1 ...
- 什么是Spring的MVC框架？
Spring 配备构建Web 应用的全功能MVC框架.Spring可以很便捷地和其他MVC框架集成,如Struts,Spring 的MVC框架用控制反转把业务对象和控制逻辑清晰地隔离.它也允许以声明的 ...
- 使用mqtt+ssl加密 WebSocket 客户端连接 MQTT 服务器以及ws+wss协议
上篇用TLS/SSL保证EMQ的网络传输安全讲了使用自签ca加密MQTT传输数据,如果mqtt用在web端,如何使用ssl.tsl加密? 1.web客户端 // 引入mqtt.min.js // 将在 ...
- 说说 Redis 哈希槽的概念？
Redis 集群没有使用一致性 hash,而是引入了哈希槽的概念,Redis 集群有 16384 个哈希槽,每个 key 通过 CRC16 校验后对 16384 取模来决定放置哪个槽, 集群的每个节点 ...