16

我想检查浏览器是否会显示特殊的“本机”样式下拉列表（例如 iPhone 和 iPod），而无需专门检查浏览器名称。是否可以在不按名称查看用户代理的情况下以更通用的方式检查该功能？

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

4

6 回答 6

4

如果没有一个非常糟糕的解决方案，我不相信这实际上是可能的。我敢打赌，最好的方法就是检测设备，因为几乎所有移动浏览器都使用本机 ddl 来显示选项。

这可以通过使用Modernizr的媒体查询和触摸检测来实现：

if (Modernizr.touch && Modernizr.mq('only screen and (max-width: 768px)') {
     //it is a mobile / tablet device
}

或者使用常规的 CSS 媒体查询。

于 2015-08-24T22:14:01.813 回答
4

我对这个答案有 90% 的把握：不。

您正在寻找检测您是否在一个看起来weird但您是weird主观定义的浏览器上。用户 Reda 的回答是正确的，但它违反了您的部分问题（不是按名称识别浏览器）。我的观点是，您需要按名称识别浏览器，因为您的限定词是主观的，因此您不会找到针对它的 JS/CSS 测试。

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

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

于 2015-08-27T16:15:08.383 回答
2

您可以检查外观 css 属性

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

如果它不是“无”，那么您的输入具有原生样式。

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

于 2015-08-27T13:17:02.133 回答
1

我目前正在检查是否存在，window.orientation它似乎可以为 android 和 ios 完成这项工作。

于 2015-08-25T11:48:24.537 回答
0

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

将您的本机元素放入 HTML 中，并尝试使用该elementFromPoint函数在 JavaScript 中获取它。（MDN链接）

如果你没有得到任何元素或者返回的元素不是你的原生元素，你就知道它不会显示。

于 2015-08-24T06:03:30.883 回答
0

尝试这样的事情

 if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
        $('#SOMEselectpicker').selectpicker('mobile');
    }
于 2019-01-09T21:10:32.283 回答