124 lines
4.6 KiB
JavaScript
124 lines
4.6 KiB
JavaScript
"use strict";
|
||
define(function (require, exports, module) {
|
||
|
||
function handle(e) {
|
||
const ctx = require("../../common/ctx");
|
||
let historyScreenW = ctx.screenWidth;
|
||
let curScreenW = ctx.getScreenWidth();
|
||
if (historyScreenW === curScreenW) {
|
||
return
|
||
}
|
||
|
||
//调整
|
||
refreshEditFrontSize()
|
||
refreshRootFrontSize();
|
||
|
||
//更新
|
||
ctx.screenWidth = ctx.getScreenWidth();
|
||
ctx.screenHeight = ctx.getScreenHeight();
|
||
}
|
||
|
||
/**
|
||
* 刷新跟节点 front-size for 全局盒子尺寸
|
||
* @constructor
|
||
*/
|
||
function refreshRootFrontSize() {
|
||
const ctx = require("../../common/ctx");
|
||
const utils = require("../../common/utils");
|
||
let designWidth = ctx.designWith;
|
||
let curDoc = document.documentElement;//当前文档的 root 元素
|
||
let curClientW = ctx.getScreenWidth();
|
||
if (!curClientW) {
|
||
curClientW = designWidth;
|
||
}
|
||
|
||
//纸张
|
||
if (curClientW >= designWidth) {
|
||
ctx.MyRoot().style.width = designWidth + "px";
|
||
} else {
|
||
ctx.MyRoot().style.width = "100%";
|
||
}
|
||
|
||
let dpr = utils.GetDpr();
|
||
//set 1rem = curClientW / designWidth (支持响应式)
|
||
let nowFrontSize = '1px';
|
||
if (ctx.isTablet || ctx.isMobile || ctx.isIOS || ctx.isAndroid) {
|
||
nowFrontSize = (curClientW / designWidth) * dpr + 'px';
|
||
} else {
|
||
nowFrontSize = (curClientW / designWidth) + 'px';
|
||
}
|
||
|
||
console.log(
|
||
"\nuserAgent: ", window.navigator.userAgent,
|
||
"\nisTablet: ", ctx.isTablet,
|
||
"\nisMobile: ", ctx.isMobile,
|
||
"\nisIOS: ", ctx.isIOS,
|
||
"\nisAndroid: ", ctx.isAndroid,
|
||
"\nwindow.innerWidth: ", window.innerWidth,
|
||
"\ngetScreenWidth: ", ctx.getScreenWidth(),
|
||
"curClientW : ", curClientW,
|
||
"\ndesignWidth: ", designWidth,
|
||
"\n1rem = ", nowFrontSize,
|
||
"\nnowFrontSize: ", nowFrontSize);
|
||
// curDoc.style.fontSize = dpr * nowFrontSize;
|
||
|
||
curDoc.style.fontSize = nowFrontSize;
|
||
// let testDiv = document.getElementById("testDevice");
|
||
// testDiv.innerText += "\ncurClientW: " + curClientW;
|
||
// testDiv.innerText += "\ndesignWith: " + designWidth;
|
||
// testDiv.innerText += "\n1rem =: " + nowFrontSize;
|
||
// testDiv.innerText += "\nwindow.screen.width =: " + window.screen.width;
|
||
// testDiv.innerText += "\nwindow.screen.height =: " + window.screen.height;
|
||
// testDiv.innerText = testDiv.innerText +
|
||
// // "\n navigator_userAgent :" + navigator.userAgent.toLocaleLowerCase() +
|
||
// "\n isMobile :" + /mobi|android|iphone|ipad|ipod/i.test(navigator.userAgent.toLocaleLowerCase()) +
|
||
// "\n isIOS :" + /iphone|ipad|ipod/.test(window.navigator.userAgent.toLocaleLowerCase()) +
|
||
// "\n isAndroid :" + /android/.test(window.navigator.userAgent.toLocaleLowerCase()) +
|
||
// "\n window.width :" + window.innerWidth +
|
||
// "\n curClientW :" + curClientW +
|
||
// " \n designWidth: " + designWidth +
|
||
// "\n 1rem = " + nowFrontSize;
|
||
|
||
}
|
||
|
||
|
||
function refreshEditFrontSize() {
|
||
const ctx = require("../../common/ctx");
|
||
const utils = require("../../common/utils");
|
||
let curClientW = ctx.getScreenWidth();
|
||
if (!curClientW) {
|
||
return
|
||
}
|
||
//字体尺寸 https://www.shejidaren.com/zihao-daxiao-sheji-bilv.html
|
||
//12～72 px 建议最大字体是48px
|
||
|
||
let dpr = utils.GetDpr();
|
||
|
||
let myEditFrontSize = document.getElementById("myEdit_main");
|
||
if (ctx.isTablet) {
|
||
myEditFrontSize.style.fontSize = ctx.editFrontSize * dpr + 'px';
|
||
} else {
|
||
myEditFrontSize.style.fontSize = ctx.editFrontSize + 'px';
|
||
}
|
||
|
||
//show
|
||
let curMyFontSizeEl = document.getElementById("cur_my_font_size");
|
||
curMyFontSizeEl.textContent = ctx.editFrontSize + "px";
|
||
//更新默认值
|
||
let liList = curMyFontSizeEl.parentElement.nextElementSibling.querySelectorAll("ul li");
|
||
for (let i = 0; i < liList.length; i++) {
|
||
let tmpLi = liList[i];
|
||
if (tmpLi.getAttribute("data-my-style-v") === ctx.editFrontSize) {
|
||
tmpLi.setAttribute("data-my-select", "true");
|
||
tmpLi.setAttribute("data-my-select-v", tmpLi.parentElement.getAttribute("data-my-select-v"));
|
||
} else {
|
||
tmpLi.removeAttribute("data-my-select");
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
//导出
|
||
exports.handle = handle;
|
||
exports.refreshEditFrontSize = refreshEditFrontSize;
|
||
}); |