add:本地测试跳转

static/css/myEdit.css

@@ -35,17 +35,29 @@ body {
 }
 
 header {
-    position: relative;
+    /*position: relative;*/
-    top: 0;
+    /*top: 0;*/
-    /* height: 8rem; */
+    /*border: 1px yellow solid;*/
-    z-index: 9999;
+    /*!* height: 8rem; *!*/
-    left: 0;
+    /*z-index: 9999;*/
-    right: 0;
+    /*left: 0;*/
-    width: 100%;
+    /*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; */
@@ -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;
+    /*height: 130rem;*/
-    padding: 20rem 20rem;
+    /*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;
+    }
+}

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);
+        console.log("myEditFrontSize: ", myEditFrontSize.style.fontSize);
-
-        if (window.myEdit.ctx.isMobile) {
         let testDiv = document.getElementById("testDevice");
-            var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
+        testDiv.innerText += "\nmyEditFrontSize:" + myEditFrontSize.style.fontSize;
-            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;
-
-        }
     }
 
     /**

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")
+        // let testDiv = document.getElementById("testDevice")
-        testDiv.innerText = "键盘输入: keyCode:" + keyCode +
+        // testDiv.innerText = "键盘输入: keyCode:" + keyCode +
-            "\nmetaKey:" + metaKey;
+        //     "\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 +
+        testDiv.innerText =
-            "\n输入内容: '" + (event.data === " ") + "'";
+            "\ninput: " + event.data + " isEmpty: " + (event.data === " ");
         window.myEdit.biz.inputHandle(event);
 
         //处理空行转换

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);

static/yanxuelu.html

@@ -7,7 +7,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>📒</title>
     <meta name="viewport"
-          content="width=device-width, height=device-height,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
+          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
+<!--          content="width=device-width, height=device-height,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">-->
     <link rel="stylesheet" type="text/css" href="./css/normalize.css">
     <link rel="stylesheet" type="text/css" href="./css/myEdit.css">
     <script type="module" src="./js/lib/main.js"></script>
@@ -16,15 +17,7 @@
 <body style="display: flex; flex-direction:column; background-color: #ffebc3">
 
 <header>
-
+    <!--  顶部  -->
-</header>
-<main style="margin-top: 90rem; display: flex; flex-direction:column; align-items:center;">
-    <h3>测试编辑</h3>
-    <div id="noteshare" spellcheck="false" translate="no">
-    </div>
-</main>
-
-<footer>
     <div class="fixStylePosition" id="_style_utils">
         <div class="fixStyleOut">
             <div style="display: flex;">
@@ -124,6 +117,20 @@
             <!--            </div>-->
         </div>
     </div>
+</header>
+
+<main id="myEdit_main">
+    <!-- 标题   -->
+    <h3 style=" border: 1px blanchedalmond solid;">
+        测试编辑
+    </h3>
+    <!-- 内容   -->
+    <div id="noteshare" spellcheck="false" translate="no">
+    </div>
+</main>
+
+<footer>
+
 </footer>
 <div id="testDevice" style="font-size: 16px; width: 300px;margin-left: 10%;"></div>