16

I would like to check whether a browser is going to show a special "native" style dropdown (such as the iPhone and iPod) without checking specifically by browser name. Is it possible to check for that capability in a more generic way without looking at the user agent by name?

I'd like to do this to determine whether to render a standard or more enhanced dropdown control.

Sam Hanley
  • 4,498
  • 7
  • 32
  • 56
Jason
  • 1,638
  • 15
  • 19
  • Are you referring to how mobile browsers render HTML select -inputs? What is your definition of "special" here? – Dani P. Dec 11 '12 at 08:24
  • Ah yes,. Like the iPhone select input control. Basically wondering if there's a way to detect if a browser doesn't render the select inline and pops up its own special control. Thanks. – Jason Dec 11 '12 at 10:11
  • Did you find a solution to this? Maybe by looking at `window.orientation`? Maybe all those mobile devices nowadays do display a nice and usable native select (multiple or not) control? – cherouvim Aug 21 '15 at 17:05
  • @cherouvim have you had a look at this? http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3888106/How-Can-I-Detect-the-iPhone--iPads-User-Agent.htm – Lyall Aug 21 '15 at 17:37

6 Answers6

4

I don't believe this is actually possible without a really poor solution. I bet the best way to go is to just detect the device because pretty much all mobile browsers use a native ddl for displaying options.

This can be achieved by using Modernizr's media queries and touch detection:

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

Or use regular CSS media queries.

Reda
  • 1,291
  • 9
  • 12
4

I'm an 90% sure of this answer: No.

You are looking to detect if you are on a browser that looks weird but you are defining weird subjectively. User Reda's answer is correct, but it violates part of your question (not to identify browsers by name). My point is that you need to identify the browsers by name because you're qualifier is subjective, so you won't find a JS/CSS test for it.

Browsers have complete control over what dropdown they show. Most are inconsistent with their implementation of CSS on these dropdown components. There are no standards saying a browser needs to expose any information about the dropdown at the application level.

To affect what you want, you need to find the browsers whose dropdown controls you don't like and list them out, and target them via Modernizr or other such trickery. Unfortunately that violates your question's intent, so I think the answer to your actual question is... no, sorry.

Reed Spool
  • 843
  • 7
  • 15
2

You can check the appearance css property 

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

and if it is not 'none' then your input has native styling.

You can find the possible values of appearance here: https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance and here http://trentwalton.com/2010/07/14/css-webkit-appearance/

Roumelis George
  • 5,870
  • 2
  • 14
  • 29
1

I'm currently checking for the existence of window.orientation and it seems to do the job for android and ios.

cherouvim
  • 30,497
  • 14
  • 99
  • 144
0

As i read this question i got an idea for a dirty solution. Just a guess but maybe it helps:

Place your native element into the HTML and try get it in JavaScript with the elementFromPoint function. (MDN link)

If you get no element or the returned element is not your native one you know it is not displayed.

DavidVollmers
  • 620
  • 4
  • 15
0

try something like this

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