fix: 优化移动工具栏的可见性逻辑,仅在触摸设备和移动视口宽度下显示

This commit is contained in:
cmliu committed 2026-08-05 16:53:18 +08:00
1 parent b334cd3225
commit 0d0107f10a
2 files changed
+5 -6

No files matched your search

+2 -2
View File
@@ -392,8 +392,8 @@
<button class="mobile-key-btn mobile-key-ctrl" type="button" data-key="ctrl-e" aria-label="Ctrl+E" data-i18n-aria-label-zh="Ctrl+E 行尾" data-i18n-aria-label-en="Ctrl+E Line end">Ctrl + E</button>
</div>
<div class="mobile-toolbar-row">
<button class="mobile-key-btn mobile-key-fn" type="button" data-key="home" aria-label="Home" data-i18n-aria-label-zh="Home 行首" data-i18n-aria-label-en="Home">Home</button>
<button class="mobile-key-btn mobile-key-fn" type="button" data-key="end" aria-label="End" data-i18n-aria-label-zh="End 行尾" data-i18n-aria-label-en="End">End</button>
<button class="mobile-key-btn mobile-key-fn" type="button" data-key="home" aria-label="Home Line start" data-i18n-aria-label-zh="Home 行首" data-i18n-aria-label-en="Home Line start">Home</button>
<button class="mobile-key-btn mobile-key-fn" type="button" data-key="end" aria-label="End Line end" data-i18n-aria-label-zh="End 行尾" data-i18n-aria-label-en="End Line end">End</button>
<button class="mobile-key-btn mobile-key-fn" type="button" data-key="pgup" aria-label="PgUp" data-i18n-aria-label-zh="PgUp 上翻页" data-i18n-aria-label-en="Page Up">PgUp</button>
<button class="mobile-key-btn mobile-key-fn" type="button" data-key="pgdn" aria-label="PgDn" data-i18n-aria-label-zh="PgDn 下翻页" data-i18n-aria-label-en="Page Down">PgDn</button>
<button class="mobile-key-btn mobile-key-fn" type="button" data-key="delete" aria-label="Delete" data-i18n-aria-label-zh="Delete 删除光标处" data-i18n-aria-label-en="Delete Forward delete">Delete</button>
+3 -4
View File
@@ -2356,10 +2356,9 @@ let mobileToolbarReady = false;
function updateMobileToolbarVisibility(): void {
const toolbar = document.getElementById('mobile-toolbar');
if (!toolbar) return;
// CSS media query already gates visibility via display:none, but we
// add a JS check for pointer:coarse as a defence against browsers
// that report coarse for mice/stylus (uncommon, but safe).
const isTouchDevice = window.matchMedia('(pointer: coarse)').matches;
// Show toolbar only on touch devices within mobile viewport width.
// Aligned with the CSS media query (pointer: coarse) and (max-width: 768px).
const isTouchDevice = window.matchMedia('(pointer: coarse) and (max-width: 768px)').matches;
const shouldShow = isTouchDevice && connectionState === 'connected';
toolbar.hidden = !shouldShow;
const panel = document.getElementById('mobile-toolbar-panel');