Last active
December 13, 2020 04:07
-
-
Save HeGanjie/b84a647cc1e7fc8e3c63c77c92803cd3 to your computer and use it in GitHub Desktop.
rem 全屏自适应逻辑,1080p下 1rem=100px
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html style="font-size: 100px"> | |
<head> | |
<meta charset="utf-8" /> | |
<meta http-equiv="Cache-control" content="no-cache"> | |
<meta http-equiv="Expires" content="-1"> | |
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /> | |
<% if (context.title != null) { %> | |
<title><%= context.title %></title> | |
<% } %> | |
<% if (context.isProd) { %> | |
<script type="text/javascript"> | |
if(!(window.console && console.log)) { | |
console = { | |
log: function(){}, | |
debug: function(){}, | |
info: function(){}, | |
warn: function(){}, | |
error: function(){} | |
}; | |
} | |
if (/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) { | |
document.write('<script src="/sycm/_bc/babel-polyfill/dist/polyfill.min.js"><\/script>\n<script src="/sycm/_bc/whatwg-fetch/dist/fetch.umd.js"><\/script>'); | |
} | |
try { | |
window.ENV = 'production'; | |
window.version = <%- JSON.stringify(context.version) || '""' %>; | |
console.log('sycm version: ', window.version) | |
} catch (e) { | |
console.warn(e) | |
} | |
</script> | |
<% } else { %> | |
<script> | |
window.ENV = 'development' | |
</script> | |
<%}%> | |
<script type='text/javascript'> | |
'use strict'; | |
window.CURR_SCALE = 1; | |
(function () { | |
var html = document.documentElement; | |
function onWindowResize() { | |
html.style.fontSize = html.getBoundingClientRect().width / 19.20 + 'px'; | |
} | |
// window.addEventListener('resize', onWindowResize); | |
onWindowResize(); | |
})(); | |
// 强制清除缓存 | |
document.addEventListener('DOMContentLoaded', function () { | |
if (!window.version) { | |
return | |
} | |
function includes(str, keyword) { | |
return (str || '').indexOf(keyword) !== -1; | |
} | |
function withExtraQueryStr(url, extraQueryStr) { | |
return !extraQueryStr ? url : '' + url + (includes(url, '?') ? '&' : '?') + extraQueryStr; | |
} | |
try { | |
fetch('/api/get-public-config?cCache=30') | |
.then(function (res) { return res.json() }) | |
.then(function (res) { | |
var version = res && res.version || Date.now(); | |
var currUrl = window.location.href; | |
if (version && version !== window.version) { | |
var nextUrl = includes(currUrl, 'ver=') | |
? currUrl.replace(/ver=[\w.-]+/, 'ver=' + version) | |
: withExtraQueryStr(currUrl, 'ver=' + version); | |
window.location.href = nextUrl; | |
} | |
}) | |
.catch(function (err) { return console.warn(err) }); | |
} catch (e) { | |
console.warn(e); | |
} | |
}, false); | |
</script> | |
</head> | |
<body> | |
<div id="<%= context.config.mountElementId %>"></div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, {useEffect, useState} from "react"; | |
import _ from 'lodash' | |
export default function Layouts(props) { | |
const [viewPortBounds, setViewPortBounds] = useState(); | |
useEffect(() => { | |
let html = document.documentElement; | |
function onWindowResize() { | |
let { width: sWidth, height: sHeight } = html.getBoundingClientRect(); | |
// 1rem = 100px for 1920 screen | |
// 调整 rem 单位方法: https://unix.stackexchange.com/a/430111/240824 | |
const remUnit = sWidth / 19.2; | |
let idealAspectRatio = 16 / 9; | |
let screenAspectRatio = sWidth / sHeight; | |
let widthEnough = idealAspectRatio <= screenAspectRatio; | |
// ideal: w/h = 16/9 | |
// 需求:内容占满屏幕,不能显示滚动条,通过 rem 缩放而不能用 scale; | |
// 做法:屏幕宽度低于 1366px 时等比缩小保证内容可以一屏展示,但是宽度需要放大超过 19.2rem 从而保持占满屏幕宽度 | |
// rem = sWidth / 19.2 | |
// boxWidth = sWidth | |
// boxHeight = sWidth / idealAspectRatio | |
// 矮屏,根据高度缩放,scale * boxHeight = sHeight | |
// 窄屏,根据宽度缩放, scale * boxWidth = sWidth | |
let scale = widthEnough // 矮屏 | |
? sHeight / (sWidth / idealAspectRatio) | |
: 1 | |
window.CURR_SCALE = Math.min(1, scale) | |
html.style.fontSize = remUnit * window.CURR_SCALE + 'px'; | |
const nextState = { | |
width: sWidth, | |
height: sHeight, | |
scale: window.CURR_SCALE | |
}; | |
if (!_.isEqual(viewPortBounds, nextState)) { | |
setViewPortBounds(nextState); | |
} | |
} | |
onWindowResize() | |
window.addEventListener("resize", onWindowResize); | |
return () => { | |
window.removeEventListener("resize", onWindowResize); | |
}; | |
}); | |
// 用户要求不需要保持 16:9 比例,需要占满屏幕 | |
let scale = viewPortBounds?.scale ?? 1 | |
let boxWidthRem = 19.2 / scale | |
return ( | |
<div | |
className="business-consultant-entry relative" | |
style={{ | |
width: `${boxWidthRem}rem`, | |
height: `10.8rem`, | |
background: "#F0F2F9" | |
}} | |
> | |
{props.children} | |
</div> | |
); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment