时间戳

首页 > 解决方案 > 防止移动设备上的 jQuery ContextMenu 子菜单项大小增加

jquery - 防止移动设备上的 jQuery ContextMenu 子菜单项大小增加

问题描述

我正在使用这个 jQuery contextMenu：https ://swisnl.github.io/jQuery-contextMenu/ 。

我创建了一个带有子菜单的菜单。当我在移动 Safari 或 Chrome 上访问子菜单项时，菜单项的大小会加倍并在页面上被截断。

截屏

我尝试设置 CSS 属性：

text-size-adjust: none !important;
-webkit-text-size-adjust: none !important;

我也试过：

text-size-adjust: 100% !important;
-webkit-text-size-adjust: 100% !important;

但这仍在继续发生。

任何帮助将不胜感激！

标签： jquerycssbootstrap-4

解决方案

您可以使用媒体查询来调整大小ContextMenu和SubMenu

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// you can use 
.submenu {
   @media (max-width: 575.98px) { 
      font-size: 10px;
      // some other properties you prefer to change to on small screens
   }
}

更多详情媒体查询

推荐阅读