fix: 优化移动工具栏的可见性逻辑,仅在触摸设备和移动视口宽度下显示
This commit is contained in:
1 parent
b334cd3225
commit
0d0107f10a
2 files changed
+5
-6
No files matched your search
+2
-2
@@ -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>
|
||||
|
||||
@@ -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');
|
||||
|
||||
Reference in new issue
Block a user