diff --git a/static/css/myEdit.css b/static/css/myEdit.css index 36a593b..b0cfe3f 100644 --- a/static/css/myEdit.css +++ b/static/css/myEdit.css @@ -167,7 +167,7 @@ main { margin: 0 80rem; } -@media screen and ( max-width: 768px ) { +@media screen and ( max-width: 1024px ) { /*当屏幕尺寸小于768px时,应用下面的css样式*/ .fixStylePosition { display: block; diff --git a/static/js/lib/common/MyUtils.js b/static/js/lib/common/MyUtils.js index 0c93248..b735676 100644 --- a/static/js/lib/common/MyUtils.js +++ b/static/js/lib/common/MyUtils.js @@ -287,7 +287,7 @@ export class MyUtils { */ RefreshRootFrontSize() { let curDoc = document.documentElement;//当前文档的 root 元素 - let curClientW = curDoc.clientWidth; + let curClientW = document.documentElement.clientWidth || document.body.clientWidth; if (!curClientW) { return } @@ -299,14 +299,34 @@ export class MyUtils { console.log("curClientW :", curClientW, "designWidth: ", designWidth, "-> ", nowFrontSize); let testDiv = document.getElementById("testDevice"); testDiv.innerText += "\nnowFrontSize: " + nowFrontSize; - // 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 curClientW :" + curClientW + - // " \n designWidth: " + designWidth + - // "\n 1rem = " + nowFrontSize + 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 curClientW :" + curClientW + + " \n designWidth: " + designWidth + + "\n 1rem = " + nowFrontSize; + + // 获取 User-Agent 字符串 + const userAgent = window.navigator.userAgent; + // 获取屏幕宽度 + // const screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;; + const screenWidth = document.documentElement.clientWidth || document.body.clientWidth; + // 判断是否是手机 + const isMobile = /Mobile/i.test(userAgent) || screenWidth < 768; + // 判断是否是平板电脑 + const isTablet = /Tablet/i.test(userAgent) || (screenWidth >= 768 && screenWidth < 1024); + if (isMobile) { + console.log("您正在使用手机访问"); + testDiv.innerText = testDiv.innerText + "\n您正在使用手机访问 " + window.myEdit.ctx.screenWidth + "*" + window.myEdit.ctx.screenHeight; + } else if (isTablet) { + console.log("您正在使用平板电脑访问"); + testDiv.innerText = testDiv.innerText + "\n您正在使用平板电脑访问 " + window.myEdit.ctx.screenWidth + "*" + window.myEdit.ctx.screenHeight; + } else { + console.log("您正在使用桌面电脑访问"); + testDiv.innerText = testDiv.innerText + "\n您正在使用桌面电脑访问 " + window.myEdit.ctx.screenWidth + "*" + window.myEdit.ctx.screenHeight; + } } @@ -349,12 +369,16 @@ export class MyUtils { // myEditFrontSize.style.fontSize = window.myEdit.ctx.editFrontSize * dpr + 'px'; // } // myEditFrontSize.style.fontSize = window.myEdit.ctx.editFrontSize * dpr + 'px'; - myEditFrontSize.style.fontSize = window.myEdit.ctx.editFrontSize + 'px'; + if (window.myEdit.ctx.isTablet) { + myEditFrontSize.style.fontSize = window.myEdit.ctx.editFrontSize * dpr + 'px'; + } else { + myEditFrontSize.style.fontSize = window.myEdit.ctx.editFrontSize + 'px'; + } // console.log("myEditFrontSize: ", myEditFrontSize.style.fontSize); let testDiv = document.getElementById("testDevice"); - testDiv.innerText = "\ndpr: " + dpr + "\nmyEditFrontSize: " + myEditFrontSize.style.fontSize; + testDiv.innerText += "\ndpr: " + dpr + "\nmyEditFrontSize: " + myEditFrontSize.style.fontSize; } /** diff --git a/static/js/lib/event/MyEventListener.js b/static/js/lib/event/MyEventListener.js index 2001d9b..549ebd2 100644 --- a/static/js/lib/event/MyEventListener.js +++ b/static/js/lib/event/MyEventListener.js @@ -151,7 +151,7 @@ export class MyEventListener { let styleUtils = document.getElementById("_style_utils"); if (window.myEdit.utils.GetSelection().isCollapsed) { // console.log("none") - if (!window.myEdit.ctx.isMobile) { + if (!window.myEdit.ctx.isMobile && !window.myEdit.ctx.isTablet) { styleUtils.style.display = "none"; } return @@ -197,5 +197,32 @@ export class MyEventListener { // window.myEdit.utils.ProhibitDefaultEvent(event); } + + + RefreshRootFrontSize(e) { + const event = window.myEdit.utils.ParseEvent(e); + //忽略高度变化 + let curClientW = document.documentElement.clientWidth || document.body.clientWidth; + if (!curClientW) { + return + } + if (window.myEdit.ctx.screenWidth === curClientW) { + window.myEdit.utils.ProhibitDefaultEvent(event); + return; + } + } + + RefreshEditFrontSize(e) { + const event = window.myEdit.utils.ParseEvent(e); + //忽略高度变化 + let curClientW = document.documentElement.clientWidth || document.body.clientWidth; + if (!curClientW) { + return + } + if (window.myEdit.ctx.screenWidth === curClientW) { + window.myEdit.utils.ProhibitDefaultEvent(event); + return; + } + } } diff --git a/static/js/lib/main.js b/static/js/lib/main.js index b8118ec..a87b222 100644 --- a/static/js/lib/main.js +++ b/static/js/lib/main.js @@ -4,6 +4,17 @@ import {MyUtils} from './common/MyUtils.js' import {MyEventListener} from "./event/MyEventListener.js"; (function () { + // 获取 User-Agent 字符串 + const userAgent = window.navigator.userAgent; + // 获取屏幕宽度 + // const screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; + const screenWidth = document.documentElement.clientWidth || document.body.clientWidth; + // 判断是否是手机 + const isMobile = /mobi|android|iphone|ipad|ipod/i.test(userAgent.toLocaleLowerCase()) || screenWidth < 768; + const isIOS = /iphone|ipad|ipod/i.test(userAgent.toLocaleLowerCase()) || screenWidth < 768; + const isAndroid = /android/i.test(userAgent.toLocaleLowerCase()) || screenWidth < 768; + // 判断是否是平板电脑 + const isTablet = /tablet/i.test(userAgent.toLocaleLowerCase()) || (screenWidth >= 768 && screenWidth < 1024); //init window.myEdit = { /** @@ -23,11 +34,14 @@ import {MyEventListener} from "./event/MyEventListener.js"; /** * 是否是手机端 */ - isMobile: /mobi|android|iphone|ipad|ipod/i.test(navigator.userAgent.toLocaleLowerCase()), - isIOS: /iphone|ipad|ipod/.test(window.navigator.userAgent.toLocaleLowerCase()), - isAndroid: /android/.test(window.navigator.userAgent.toLocaleLowerCase()), + isMobile: isMobile, + isIOS: isIOS, + isAndroid: isAndroid, + //判断是否是平板电脑 + isTablet: isTablet, + screenWidth: document.documentElement.clientWidth || document.body.clientWidth, //高度 for android - originHeight: document.documentElement.clientHeight || document.body.clientHeight, + screenHeight: document.documentElement.clientHeight || document.body.clientHeight, /** * 默认body front-size 单位px */ @@ -104,16 +118,16 @@ import {MyEventListener} from "./event/MyEventListener.js"; */ window.myEdit.utils.RefreshRootFrontSize(); window.myEdit.utils.RefreshEditFrontSize(); - document.addEventListener('DOMContentLoaded', window.myEdit.utils.RefreshRootFrontSize); - document.addEventListener('DOMContentLoaded', window.myEdit.utils.RefreshEditFrontSize); + document.addEventListener('DOMContentLoaded', window.myEdit.eventListener.RefreshRootFrontSize); + document.addEventListener('DOMContentLoaded', window.myEdit.eventListener.RefreshEditFrontSize); window.addEventListener('pageshow', function (e) { if (e.persisted) { window.myEdit.utils.RefreshRootFrontSize(); window.myEdit.utils.RefreshEditFrontSize(); } }); - window.addEventListener('resize', window.myEdit.utils.RefreshRootFrontSize); - window.addEventListener('resize', window.myEdit.utils.RefreshEditFrontSize); + window.addEventListener('resize', window.myEdit.eventListener.RefreshRootFrontSize); + window.addEventListener('resize', window.myEdit.eventListener.RefreshEditFrontSize); /** * 窗口撤销事件. * js中的键盘事件只有三种:keydown、keyup、keypress。它们触发的顺序是:keydown -> keypress -> keyup。当按下一个键不放开,一般会重复地触发 keydown+keypress,直到放开后触发一个 keyup 事件。 @@ -168,6 +182,24 @@ window.onload = function () { window.myEdit.utils.ProhibitDefaultEvent(event); }, false); + // 阻止双击放大 + var lastTouchEnd = 0; + document.addEventListener('touchstart', function (event) { + if (event.touches.length > 1) { + event.preventDefault(); + } + }); + document.addEventListener('touchend', function (event) { + let now = (new Date()).getTime(); + if (now - lastTouchEnd <= 300) { + event.preventDefault(); + } + lastTouchEnd = now; + }, false); + // 阻止双指放大 + document.addEventListener('gesturestart', function (event) { + event.preventDefault(); + }); /** * 使用说明 diff --git a/static/js/lib/todolist b/static/js/lib/todolist index b17b4e8..5e82671 100644 --- a/static/js/lib/todolist +++ b/static/js/lib/todolist @@ -1,2 +1,3 @@ -选择文字 第一次添加样式的时候 丢失选区问题 +☑️选择文字 第一次添加样式的时候 丢失选区问题 +pad 上键盘事件 - 无法选择一行字某几个子添加样式