javascript - Detecting mobile browsers on the web? - Stack Overflow

admin管理员组

文章数量:1316016

I'm curious to know how to check for iPhone, iPad and other mobile browsers.(JavaScript or CSS)

Edit:

Not user agent string, please. That can be faked.

Possible Dupes:

• Auto detect mobile browser (via user-agent?) and
  • Standard way to detect mobile browsers in a web application based on the http request

I'm curious to know how to check for iPhone, iPad and other mobile browsers.(JavaScript or CSS)

Edit:

Not user agent string, please. That can be faked.

Possible Dupes:

• Auto detect mobile browser (via user-agent?) and
  • Standard way to detect mobile browsers in a web application based on the http request

• javascript
• browser-detection
• mobile-browser
• device-detection

Share Improve this question Follow edited May 23, 2017 at 10:32 CommunityBot 111 silver badge asked Sep 3, 2010 at 0:03 MosheMoshe 58.1k8080 gold badges277277 silver badges430430 bronze badges 3

• possible duplicate of Standard way to detect mobile browsers in a web application based on the http request – Preet Sangha Commented Sep 3, 2010 at 0:07
• 2 So what if it can be faked? If thats that case than the users intention was to view the web that way anyway. – Andrew Commented Sep 3, 2010 at 12:42
• I'm afraid there is no other way to detect a browser other than reading it's user agent string. – Octavian Helm Commented Sep 3, 2010 at 12:44

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

I would use WURFL. It's an Open Source xml-database of more than 10000 mobile devices that will detect (almost always) your Mobile Phone and Browser capabilities given the user-agent HTTP header value.

You will get information like:

1. Screen size
2. XHTML/HTML support level
3. Graphic type support

Many others.

There are wrapper APIs for popular languages such as PHP, Java and .NET, so you won't have to deal with the XML database yourself.

Basically you check the User Agent String

see http://www.hand-interactive./resources/detect-mobile-javascript.htm

Detect iPhone:

navigator.userAgent.toLowerCase().search("iphone") > -1

In general feature detection is better than browser detection it is better to know what the user's browser can do than what he's using. Modernizer is a good tool for that.

Use Modernizr - http://modernizr./

Modernizr is a JS script that tests the browser for a variety of HTML5 and CSS3 capabilities when the page loads. You can either look in the Modernizr JS object, or use the classes it adds to the HTML element. If the class 'touch' is present, you have a touchscreen device; otherwise, the class is no-touch. Then you can do this in your CSS

.touch .myElement { /* touch device styles */ }

.no-touch .myElement { /* regular browser styles */ }

Testing a browsers capabilities is far more useful and future-proof that sniffing for user agents. In this way, for each CSS3 feature you want to add, you can easily write a fallback, as I show here.

Use javascript to detect the HTTP User Agent - fancy term for name of the browser

本文标签： javascriptDetecting mobile browsers on the webStack Overflow