如何检测移动浏览器是否会显示“本机”下拉控件?

时间:2012-12-11 08:07:23

标签: javascript browser-feature-detection

我想检查浏览器是否会显示特殊的“本机”样式下拉列表(例如iPhone和iPod),而不会通过浏览器名称进行特定检查。是否可以以更通用的方式检查该功能,而无需按名称查看用户代理?

我想这样做以确定是否呈现标准或更强大的下拉控件。

5 个答案:

答案 0 :(得分:3)

我对这个答案有90%的肯定:没有。

您希望检测您是否在浏览器上看起来MethodRefTest::passMeAround ,但您是主观定义apply。用户Reda的回答是正确的,但它违反了部分问题(不是按名称识别浏览器)。我的观点是你需要通过名称识别浏览器,因为你的限定符是主观的,所以你不会找到它的JS / CSS测试。

浏览器可以完全控制它们显示的下拉列表。大多数都与这些下拉组件上的CSS实现不一致。没有标准说浏览器需要在应用程序级别公开有关下拉列表的任何信息。

要影响您的需求,您需要找到您不喜欢的下拉控件的浏览器并将其列出,并通过Modernizr或其他此类技巧来定位它们。不幸的是,这违反了你的问题的意图,所以我认为你的实际问题的答案是......不,抱歉。

答案 1 :(得分:1)

我目前正在检查是否存在window.orientation,它似乎为android和ios做了工作。

答案 2 :(得分:1)

您可以查看外观css属性

  -webkit-appearance: none;
  -moz-appearance:    none;
   appearance:        none;

如果不是'没有'然后你的输入有本机样式。

您可以在此处找到可能的外观值: https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearancehttp://trentwalton.com/2010/07/14/css-webkit-appearance/

答案 3 :(得分:0)

当我读到这个问题时,我想到了一个肮脏的解决方案。只是猜测,但也许有帮助:

将您的原生元素放入HTML中,然后尝试使用elementFromPoint函数在JavaScript中获取它。 (MDN link

如果没有元素或返回的元素不是您的原生元素,则表示它不会显示。

答案 4 :(得分:0)

尝试这样的事情

 if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
        $('#SOMEselectpicker').selectpicker('mobile');
    }