How to detect if mobile browser will show a "native" dropdown control?

Question

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.

Answer 1

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.

Answer 2

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.