From c497e02416f18a7121f6a255078a4ce5e3a766cc Mon Sep 17 00:00:00 2001 From: shaoyongjun Date: Fri, 1 Nov 2024 09:52:52 +0800 Subject: [PATCH] =?UTF-8?q?add:=E6=9C=AC=E5=9C=B0=E6=B5=8B=E8=AF=95?= =?UTF-8?q?=E8=B7=B3=E8=BD=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- static/css/myEdit.css | 62 +++++++++++++++++----- static/js/lib/common/MyUtils.js | 71 +++----------------------- static/js/lib/event/MyEventListener.js | 10 ++-- static/js/lib/main.js | 7 +-- static/yanxuelu.html | 27 ++++++---- 5 files changed, 81 insertions(+), 96 deletions(-) diff --git a/static/css/myEdit.css b/static/css/myEdit.css index 183f069..7608eae 100644 --- a/static/css/myEdit.css +++ b/static/css/myEdit.css @@ -35,17 +35,29 @@ body { } header { - position: relative; - top: 0; - /* height: 8rem; */ - z-index: 9999; - left: 0; - right: 0; - width: 100%; + /*position: relative;*/ + /*top: 0;*/ + /*border: 1px yellow solid;*/ + /*!* height: 8rem; *!*/ + /*z-index: 9999;*/ + /*left: 0;*/ + /*right: 0;*/ + /*width: 100%;*/ + + /*响应式*/ + /*display: flex;*/ + /*flex-direction:column;*/ + /*flex-wrap: nowrap;*/ +} + +main { + display: flex; + flex-direction: column; + align-items: center; } #noteshare { - width: 90%; + width: 80%; /* width: 21cm; */ min-height: 2000rem; /* font-size: 1.5rem; */ @@ -104,7 +116,7 @@ header { .childStyleU { text-decoration: underline; -/*/ / 中划线 / / text-decoration: line-through;*/ + /*/ / 中划线 / / text-decoration: line-through;*/ } .childStyleDel { @@ -121,9 +133,9 @@ header { position: fixed; z-index: 99; width: auto; - height: 200rem; + /*height: 200rem;*/ - padding: 30rem 30rem; + padding: 20rem 30rem; /*padding: 0.6rem 1rem 0.6rem 1rem;*/ justify-content: center; align-items: center; @@ -139,8 +151,8 @@ header { /*border: 1px blue solid;*/ margin: 0 0; width: auto; - height: 130rem; - padding: 20rem 20rem; + /*height: 130rem;*/ + /*padding: 20rem 20rem;*/ display: flex; justify-content: center; @@ -151,3 +163,27 @@ header { .fixStyleInnerSpan { margin: 0 80rem; } + +@media screen and ( max-width: 768px ) { + /*当屏幕尺寸小于768px时，应用下面的css样式*/ + .fixStylePosition { + display: block; + z-index: 99; + top: 0; + width: 100%; + min-height: 200rem; + margin-bottom: 3rem; + } + + body{ + top: 1%; + } + #_style_utils svg{ + width:400rem; + height:400rem; + margin: 50rem 0; + } + main { + margin-top: 500rem; + } +} diff --git a/static/js/lib/common/MyUtils.js b/static/js/lib/common/MyUtils.js index 74e32f9..56e6bef 100644 --- a/static/js/lib/common/MyUtils.js +++ b/static/js/lib/common/MyUtils.js @@ -299,13 +299,13 @@ export class MyUtils { console.log("curClientW :", curClientW, "designWidth: ", designWidth, "-> ", nowFrontSize); let testDiv = document.getElementById("testDevice") testDiv.innerText = testDiv.innerText + - "\n navigator_userAgent :" + navigator.userAgent.toLocaleLowerCase() + + // "\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 curClientW :" + curClientW + " \n designWidth: " + designWidth + - "\n -> " + nowFrontSize + "\n 1rem = " + nowFrontSize } @@ -331,72 +331,17 @@ export class MyUtils { } } - let myEditFrontSize = document.getElementById("noteshare"); + let myEditFrontSize = document.getElementById("myEdit_main"); if (document.documentElement.clientWidth <= 720) { - myEditFrontSize.style.fontSize = window.myEdit.ctx.editFrontSize + 'px'; + myEditFrontSize.style.fontSize = (window.myEdit.ctx.editFrontSize + 6) + 'px'; } else { myEditFrontSize.style.fontSize = window.myEdit.ctx.editFrontSize * dpr + 'px'; } + // myEditFrontSize.style.fontSize = window.myEdit.ctx.editFrontSize * dpr + 'px'; - console.log("body-frontSize: ", myEditFrontSize.style.fontSize); - - if (window.myEdit.ctx.isMobile) { - let testDiv = document.getElementById("testDevice"); - var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight; - if (window.myEdit.ctx.originHeight < resizeHeight) { - console.log('Android 键盘收起啦！'); - testDiv.innerText = "\nmobile: " + 'Android 键盘收起啦！' + - "\noriginHeight " + window.myEdit.ctx.originHeight + - "\nresizeHeight:" + resizeHeight + - "\ninnerHeight:" + window.innerHeight + - "\nvisualViewport.height: " + window.visualViewport.height - // Android 键盘收起后操作 - let styleUtils = document.getElementById("_style_utils"); - styleUtils.style.display = "none"; - setTimeout(() => { - this.keyBoardHeight = window.innerHeight - window.visualViewport.height; - // console.log("mobile: ", this.keyBoardHeight); - - testDiv.innerText = "\n键盘收起啦mobile: " + this.keyBoardHeight + - "\noriginHeight " + window.myEdit.ctx.originHeight + - "\nresizeHeight " + resizeHeight + - "\ninnerHeight:" + window.innerHeight + - "\nvisualViewport.height: " + window.visualViewport.height - - let styleUtils = document.getElementById("_style_utils"); - styleUtils.style.display = "none"; - }, 800); - } else { - console.log('Android 键盘弹起啦！'); - - testDiv.innerText = "\nmobile: " + 'Android 键盘弹起啦！' + - "\noriginHeight " + window.myEdit.ctx.originHeight + - "\nresizeHeight " + resizeHeight + - "\ninnerHeight:" + window.innerHeight + - "\nvisualViewport.height: " + window.visualViewport.height - - - // Android 键盘弹起后操作 - setTimeout(() => { - this.keyBoardHeight = window.innerHeight - window.visualViewport.height; - // console.log("mobile: ", this.keyBoardHeight); - - testDiv.innerText = "\n键盘弹起啦mobile: " + this.keyBoardHeight + - "\noriginHeight " + window.myEdit.ctx.originHeight + - "\nresizeHeight " + resizeHeight + - "\ninnerHeight:" + window.innerHeight + - "\nvisualViewport.height: " + window.visualViewport.height - // styleUtils.style.left = 0; - let styleUtils = document.getElementById("_style_utils"); - styleUtils.style.display = "block"; - styleUtils.style.bottom = "500px"; - }, 800); - - - } - window.myEdit.ctx.originHeight = resizeHeight; - - } + console.log("myEditFrontSize: ", myEditFrontSize.style.fontSize); + let testDiv = document.getElementById("testDevice"); + testDiv.innerText += "\nmyEditFrontSize:" + myEditFrontSize.style.fontSize; } /** diff --git a/static/js/lib/event/MyEventListener.js b/static/js/lib/event/MyEventListener.js index dda152d..2001d9b 100644 --- a/static/js/lib/event/MyEventListener.js +++ b/static/js/lib/event/MyEventListener.js @@ -72,9 +72,9 @@ export class MyEventListener { const keyCode = window.myEdit.utils.GetKeyCode(event); const metaKey = event.metaKey; - let testDiv = document.getElementById("testDevice") - testDiv.innerText = "键盘输入: keyCode:" + keyCode + - "\nmetaKey:" + metaKey; + // let testDiv = document.getElementById("testDevice") + // testDiv.innerText = "键盘输入: keyCode:" + keyCode + + // "\nmetaKey:" + metaKey; //支持全屏撤销 if (metaKey && keyCode === 90) { @@ -102,8 +102,8 @@ export class MyEventListener { const event = window.myEdit.utils.ParseEvent(e); // console.log("input : ", event, " text: '", event.data + "'") let testDiv = document.getElementById("testDevice") - testDiv.innerText = testDiv.innerText + - "\n输入内容: '" + (event.data === " ") + "'"; + testDiv.innerText = + "\ninput: " + event.data + " isEmpty: " + (event.data === " "); window.myEdit.biz.inputHandle(event); //处理空行转换 diff --git a/static/js/lib/main.js b/static/js/lib/main.js index 699e363..b99e8a0 100644 --- a/static/js/lib/main.js +++ b/static/js/lib/main.js @@ -31,11 +31,11 @@ import {MyEventListener} from "./event/MyEventListener.js"; /** * 默认body front-size 单位px */ - editFrontSize: 14, + editFrontSize: 12, /** * 设计稿宽度 375 */ - designWith: 1280, + designWith: 375, /** * 文档的根节点 */ @@ -120,7 +120,6 @@ import {MyEventListener} from "./event/MyEventListener.js"; * */ window.addEventListener('keydown', window.myEdit.eventListener.WindowsKeydownOrTouchendHandle, true); - window.addEventListener('touchend', window.myEdit.eventListener.WindowsKeydownOrTouchendHandle, true); }()); /** @@ -162,8 +161,6 @@ window.onload = function () { //监听鼠标抬起事件 document.getElementById("noteshare").addEventListener("mouseup", window.myEdit.eventListener.MouseUpOrTouchend, true); - //监听手指抬起事件 - document.getElementById("noteshare").addEventListener("touchend", window.myEdit.eventListener.MouseUpOrTouchend, true); //这里监听鼠标按下事件 document.getElementById("_style_utils").addEventListener("mousedown", function (e) { const event = window.myEdit.utils.ParseEvent(e); diff --git a/static/yanxuelu.html b/static/yanxuelu.html index e5991c1..bf66f16 100644 --- a/static/yanxuelu.html +++ b/static/yanxuelu.html @@ -7,7 +7,8 @@ 📒 + content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> + @@ -16,15 +17,7 @@
- -
-
-

测试编辑

-
-
-
- -