Как отключить подсветку текста в мобильном браузере (Chrome)?

Question

Я использую Boostrap 4 для создания сети. Простой код, такой как ниже:

<div class="col-12 p-2" id="Maincourse">  
  <h1 class="m-0">Main course</h1> 
</div>

Я использую мой Android Chrome Браузер (версия 80.0.3987.149), нажмите на текст, он выделит текст и всплывающий поиск Google.

Как я могу отключить его? Я не хочу устанавливать user-select: none, потому что мне нужно позволить пользователю выделять текст при длительном нажатии.

Answer 1

Добавив role="dialog" в обертку, я решил мою проблему. Но я понятия не имею, почему, кто-нибудь может объяснить?

Answer 2

.disable-select {
  user-select: none; /* standerd */
  -moz-user-select: none; /* firefox specific */
  -webkit-user-select: none; /* Chrome, Opera and Safari*/
  -ms-user-select: none; /* IE, ms-edge */
}

Источник1: https://www.w3schools.com/cssref/css3_pr_user-select.asp
Источник2: https://developer.mozilla.org/en-US/docs/Web/CSS/user-select

версия совместимости

desktop:

Chrome: 54+
Firefox: 69+
Opera: 15+
Safari: 3+
MS Edge: 12+
IE: 10+

mobile

Chrome for Android: 54+
Android web-view: 54+
Firefox for Android: 4+
Opera for Android: 14+
Safari on IOS: 3+

Для получения дополнительной информации и совместимости версий обратитесь к источникам.