Question

我有以下JavaScript代码，它们使用浏览器检测和navigator.platform属性以及导航器对象的navigator.userAgent属性。这用于基于最终用户正在浏览的设备来执行特定于环境/平台的代码。

问题源于Android和iOS设备上的Bootstrap工具提示的行为 - 当用户将鼠标悬停在<a>元素上时，工具提示会出现，现在触摸设备没有悬停的概念而且处理不好（对于使用Safari的iOS上的示例工具提示在第一次触摸后无法被解雇，在使用Chrome的Android上，工具提示可以暂时显示）。决定移动设备上的用户不应该使用工具提示功能，因为它们处理不当。

此问题在<a>元素上显示（工具提示故意应用于iOS和Android代码块以演示问题），用作带有“Disco”图标的链接'，'Bouncy Castles'，'Clowns'等（如果在768px以上的phsyical iOS或Android平板电脑上观看）：http://fun-booths.co.uk/dev/

HTML（一个片段）

    <span class="dec-block hidden-xs"> 
      <span class="promo-details">   
      <i class ="fa fa-headphones"> </i>
      <span class="promo-a-cont">  
      <a href="http://www.bestdiscointown.co.uk" title="" class="customtooltip" data-original-title="Best Disco in Town offer a professional DJ suitable for any party."> 
       <span class="dashed"> Disco </span>
      </a>
      </span>
    </span>

JS

正如您所看到的，代码显示如果isOS测试为true，则不执行工具提示JavaScript，else if语句然后检查isAndroid是否测试为真，再次没有工具提示JavaScript是执行。最后，else语句说明如果用户在任何其他系统上，则执行工具提示JavaScript。

$(document).ready(function(){
  var isOS = /iPad|iPhone|iPod/.test(navigator.platform);
  var isAndroid = /(android)/i.test(navigator.userAgent);

  ///////////////////////////////////////// if OS
  if (isOS){

  ///////////////////////////////////////// if Android
  } else if(isAndroid){

  ///////////////////////////////////////// if another system
  } else {
    toolOptions = {
      animation: true,
      placement:"top",
      template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',
      container:"body"
    };

    $('.customtooltip').tooltip(toolOptions);

  }//end if system
});

我需要增加对这个问题和潜在解决方案的理解，所以如果你能回答我的问题，请。

导航器对象是日期对象的本机JavaScript对象吗？
如果导航器对象是原生的，那么我是否正确地说这肯定是内置于所有现代Web浏览器中，因为它们具有JavaScript引擎？那为什么这被认为是一种不好的做法呢？
在对MDN进行研究后，navigator.platform属性和navigator.userAgent声明为：

'此功能已从Web标准中删除。一些浏览器可能仍然支持它，它正在被删除。不要在旧项目或新项目中使用它。使用它的页面或Web应用程序可能随时休息。'

和

基于检测用户代理字符串的浏览器识别是不可靠且不推荐，因为用户代理字符串是用户可配置的。

鉴于这种浏览器检测方法不遵守Web标准，如何防止在触摸设备上向用户显示工具提示？

我已经在多个版本的真实Android平板电脑和iOS平板电脑上进行了测试，这个JavaScript修复工作确实有效 - 即使这是不好的做法。弹出窗口没有出现，因此我认为问题是固定的。但是，除了Android和iOS设备之外，我还没有考虑其他触摸设备场景。

JavaScript - 针对iOS / Android触控设备的浏览器检测

0 个答案: