|
|
|
|
@ -0,0 +1,86 @@
|
|
|
|
|
/**
|
|
|
|
|
* 原型尺寸自适应：以 MacBook Pro 13" 2020 默认逻辑分辨率 1440×900 为 1:1。
|
|
|
|
|
* 字体、图标随窗口缩放；首屏 banner 始终等于当前可视一屏，避免 100vh × zoom 撑出窗口。
|
|
|
|
|
*/
|
|
|
|
|
(function () {
|
|
|
|
|
var DESIGN_WIDTH = 1440;
|
|
|
|
|
var DESIGN_HEIGHT = 900;
|
|
|
|
|
var MOBILE_MAX = 767;
|
|
|
|
|
var MIN_SCALE = 0.75;
|
|
|
|
|
var MAX_SCALE = 1.5;
|
|
|
|
|
|
|
|
|
|
var root = document.documentElement;
|
|
|
|
|
if (root.getAttribute("data-prototype-scale") === "off") {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var style = document.createElement("style");
|
|
|
|
|
style.setAttribute("data-prototype-scale", "css");
|
|
|
|
|
style.textContent = [
|
|
|
|
|
"html.is-prototype-scaled{zoom:var(--prototype-scale)}",
|
|
|
|
|
"html.is-prototype-scaled .hero{",
|
|
|
|
|
"width:100%!important;",
|
|
|
|
|
"height:var(--prototype-hero-height)!important;",
|
|
|
|
|
"max-height:var(--prototype-hero-height)!important;",
|
|
|
|
|
"min-height:0!important;",
|
|
|
|
|
"overflow:hidden;",
|
|
|
|
|
"}",
|
|
|
|
|
"html.is-prototype-scaled .hero-banners,",
|
|
|
|
|
"html.is-prototype-scaled .hero-banner{inset:0;}",
|
|
|
|
|
"@supports not (zoom:1){",
|
|
|
|
|
"html.is-prototype-scaled{font-size:calc(15px * var(--prototype-scale))}",
|
|
|
|
|
"}",
|
|
|
|
|
].join("");
|
|
|
|
|
(document.head || root).appendChild(style);
|
|
|
|
|
|
|
|
|
|
function inIframe() {
|
|
|
|
|
try {
|
|
|
|
|
return window.self !== window.top;
|
|
|
|
|
} catch (err) {
|
|
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function viewportSize() {
|
|
|
|
|
var visual = window.visualViewport;
|
|
|
|
|
return {
|
|
|
|
|
width: (visual && visual.width) || window.innerWidth || DESIGN_WIDTH,
|
|
|
|
|
height: (visual && visual.height) || window.innerHeight || DESIGN_HEIGHT,
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function shouldFitBothAxes() {
|
|
|
|
|
var path = String(location.pathname || "");
|
|
|
|
|
return /(?:^|\/)(?:login(?:-en)?|layout)\.html$/.test(path);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function apply() {
|
|
|
|
|
var size = viewportSize();
|
|
|
|
|
var width = size.width;
|
|
|
|
|
var height = size.height;
|
|
|
|
|
var scale = 1;
|
|
|
|
|
var scaled = false;
|
|
|
|
|
|
|
|
|
|
if (!inIframe() && width > MOBILE_MAX) {
|
|
|
|
|
scale = shouldFitBothAxes()
|
|
|
|
|
? Math.min(width / DESIGN_WIDTH, height / DESIGN_HEIGHT)
|
|
|
|
|
: width / DESIGN_WIDTH;
|
|
|
|
|
scale = Math.max(MIN_SCALE, Math.min(MAX_SCALE, scale));
|
|
|
|
|
scaled = true;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
root.style.setProperty("--prototype-scale", String(scale));
|
|
|
|
|
root.style.setProperty("--prototype-design-width", DESIGN_WIDTH + "px");
|
|
|
|
|
root.style.setProperty("--prototype-design-height", DESIGN_HEIGHT + "px");
|
|
|
|
|
// zoom 后再等于一屏：布局高度 = 可视高度 / scale
|
|
|
|
|
root.style.setProperty("--prototype-hero-height", height / scale + "px");
|
|
|
|
|
root.classList.toggle("is-prototype-scaled", scaled);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
apply();
|
|
|
|
|
window.addEventListener("resize", apply);
|
|
|
|
|
window.addEventListener("orientationchange", apply);
|
|
|
|
|
if (window.visualViewport) {
|
|
|
|
|
window.visualViewport.addEventListener("resize", apply);
|
|
|
|
|
}
|
|
|
|
|
})();
|
