Как определить, будет ли мобильный браузер показывать "родной" выпадающий элемент управления?

Я хотел бы проверить, будет ли браузер показывать специальный раскрывающийся список "родной" (например, iPhone и iPod), не проверяя конкретно имя браузера. Можно ли проверить эту возможность более общим образом, не глядя на пользовательский агент по имени?

Я хотел бы сделать это, чтобы определить, следует ли отображать стандартный или более расширенный элемент управления выпадающим списком.

Ответы

Ответ 1

Я не считаю, что это действительно возможно без очень плохого решения. Я уверен, что лучший способ - просто обнаружить устройство, потому что почти все мобильные браузеры используют собственный ddl для отображения параметров.

Это может быть достигнуто с помощью Modernizr медиа-запросов и сенсорного обнаружения:

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

Или используйте обычные запросы в формате CSS.

Ответ 2

Я на 90% уверен в этом ответе: Нет.

Вы хотите определить, находитесь ли вы в браузере, который выглядит weird, но вы определяете weird субъективно. Ответ пользователя Reda правильный, но он нарушает часть вашего вопроса (не для определения браузеров по имени). Я хочу сказать, что вам нужно идентифицировать браузеры по имени, потому что вы отборочный субъективен, поэтому вы не найдете для него JS/CSS-тест.

Браузеры имеют полный контроль над раскрывающимся списком. Большинство из них несовместимы с их внедрением CSS для этих выпадающих компонентов. Нет никаких стандартов, говорящих, что браузер должен раскрывать любую информацию о выпадающем списке на уровне приложения.

Чтобы повлиять на то, что вы хотите, вам нужно найти браузеры, чьи выпадающие элементы управления вам не нравятся, и вывести их на экран, а также настроить их через Modernizr или другие подобные обманки. К сожалению, это нарушает ваши намерения, поэтому я думаю, что ответ на ваш реальный вопрос... нет, извините.

Ответ 3

В настоящее время я проверяю существование window.orientation и, похоже, выполняет работу для android и ios.

Ответ 4

Как я прочитал этот вопрос, у меня появилась идея для грязного решения. Просто догадаться, но, возможно, это помогает:

Поместите свой собственный элемент в HTML и попробуйте получить его в JavaScript с помощью функции elementFromPoint. (ссылка MDN)

Если у вас нет элемента или возвращаемый элемент не является вашим родным, вы знаете, что он не отображается.

Ответ 5

Вы можете проверить свойство 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-appearance/

Ответ 6

попробуй что-нибудь подобное

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