Js check iphone useragent

How to determine which iPhone version the javascript code runs on?

Need to distinguish between iPhone3x and iPhone4x. Is there any way to figure out the version from JavaScript please?

6 Answers 6

It would be a combination of two methods in Javascript:

So all you need to do is test if it’s an Iphone and then get the version:

You can use navigator.userAgent to check the OS version, but that isn’t really the problem here.

What you can do is use media queries to check the actual screen resolution of the device, which might be the cause of the problem at hand.

You could also probably do without JavaScript, by using media queries for loading different stylesheets for retina displays:

By using WEBGL_debug_renderer_info extension, which is part of the WebGL API, you are able to retrieve the vendor of the GPU and the renderer name.

Combining this with screen dimensions of the device you can accurately define which version it is. The code example below shows how you can do this for all iPhone versions including 3 and 4.

I came across to a similar problem a while ago. Working on a client’s website that had lots of videos loaded via javascript, I found out that the video format they needed to use had a weird frame rate that didn’t work on iPhone 3GS -.

Following atornblad’s approach, I got to this solution that perfectly suited what I needed:

First it checks if the user is coming to me from an iPod or an iPhone. Then, it checks for Retina support. Since only iPhone 4+ supports it, I managed to call the correct video files for older devices.

Something about the more CPU-speed measuring-methods: They may be an «unfit» approach here, but finding out the computing power of your target device might be useful for some cases.

So here is something I want to add to those methods: instead of counting up a fixed value and measuring the time, it would be more robust to count up for a fixed time and then compare reached values. If your user visits you on a device that is much slower, maybe because it runs inside an emulator, he will have to wait until you counted to n. if you had left the loop after, say 200ms, you would just have reaced a very low value, and the UX was not influenced.

Additionally, it’s always nice to know, how long an operation will take, it reduces uncertainties.

Источник

Detecting the iPhone from jQuery

I know browser-detection is supposed to be taboo, but I’m out of ideas.

I have a website that I want to be nice and full-featured when running on a full-sized computer and simple to use when on an iPhone (or other smart phone). What’s the right thing to do here?

3 Answers 3

you can do it with simple javascript

Are you using JQuery? Sure you are! Who isn’t, right? Put this in a file called jquery.browser.mobile.js and then reference it.

This will allow you to check for specific instances that you are on an Apple product.

The reason you’d want to do something like this, is because Apple products fire touch events and not click events. So you might want to hook up handlers to elements differently on Apple products.

Well.. I don’t completely understand the question, so I will answer what I understood.

To find the browsers that are iPhone, you will use the javascript in the page to get the navigator.userAgent . The useragent has unique info to iPhone. You can look through it and find it out that way. To see how the iphone useragent differs from a PC user agent, go to whatsmyuseragent.com from both, and you will see the different useragents.

Not the answer you’re looking for? Browse other questions tagged jquery iphone or ask your own question.

Linked

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

site design / logo © 2021 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2021.12.7.40929

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник

Detect if device is iOS

I’m wondering if it’s possible to detect whether a browser is running on iOS, similar to how you can feature detect with Modernizr (although this is obviously device detection rather than feature detection).

Normally I would favour feature detection instead, but I need to find out whether a device is iOS because of the way they handle videos as per this question YouTube API not working with iPad / iPhone / non-Flash device

20 Answers 20

Detecting iOS

This might be the shortest alternative that also covers iOS 13:

iOS will be either true or false

Worse option: User agent sniffing

User Agent sniffing is more dangerous and problems appear often.

On iPad iOS 13, the user agent is identical with that of a MacOS 13 computer, but if you ignore iPads this might work still for a while:

The !window.MSStream is to not incorrectly detect IE11, see here and here.

Note: Both navigator.userAgent and navigator.platform can be faked by the user or a browser extension.

Browser extensions to change userAgent or platform exist because websites use too heavy-handed detection and often disable some features even if the user’s browser would otherwise be able to use that feature.

To de-escalate this conflict with users it’s recommended to detect specifically for each case the exact features that your website needs. Then when the user gets a browser with the needed feature it will already work without additional code changes.

Detecting iOS version

The most common way of detecting the iOS version is by parsing it from the User Agent string. But there is also feature detection inference*;

We know for a fact that history API was introduced in iOS4 — matchMedia API in iOS5 — webAudio API in iOS6 — WebSpeech API in iOS7 and so on.

Note: The following code is not reliable and will break if any of these HTML5 features is deprecated in a newer iOS version. You have been warned!

Источник

detect ipad/iphone webview via javascript

Is there a way to detect with JavaScript if the website runs inside the iPad’s Safari or inside an application WebView?

15 Answers 15

This uses a combination of window.navigator.userAgent and window.navigator.standalone . It can distinguish between all four states relating to an iOS web app: safari (browser), standalone (fullscreen), uiwebview, and not iOS.

User Agents

Running in UIWebView

Running in Safari on iPad

Running in Safari on Mac OS X

Running in Chrome on Mac OS X

Running in FireFox on Mac OS X

Detection Code

I think that you can just use the User-Agent .

UPDATE

Page browsed using iPhone Safari

I will try in a second with UIWebView

The difference is that the Safari one says Safari/6531.22.7

Solution

I’ve tried all these solutions but didn’t work in my case,
I was going to detect the Webview inside Telegram. I think it uses SFSafariViewController .
I noticed Safari app changes all phone style texts to links with «tel:» prefix but a webview doesn’t.
So, I used that.
test it here : jsfiddle

Note that this approach does not work for iOS 10 and older versions.

For the Spring of 2018 none of proposed method worked for me so I came up with a new approach (which is not userAgent based):

You are welcome to extend the code for iPad devices too, I think it should do the trick.

Worked well for Telegram, Facebook, VK webviews.

Neoneye’s solution does not work anymore (see comments) and can be simplified. On the other hand, testing only «Safari» in the UA adresses much more than the ios handheld devices.

This is the test i’m using :

I know this code will check if it is being accessed from an icon added to the home screen:

but I’m not sure how it would react in a UIWebView. The only other solution I could think of is getting the user agent or using — (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType and replacing the query string of the page you are accessing with something the page uses to identify that it is being accessed from a web view.

Источник

How to detect a mobile device with JavaScript?

I have been asked to create an actual HTML page / JavaScript to simulate detection of the mobile devices (iPhone / iPad / Android) using JavaScript code. This will then take the user to a different screen which asks them for their email address.

21 Answers 21

I know this answer is coming 3 years late but none of the other answers are indeed 100% correct. If you would like to detect if the user is on ANY form of mobile device (Android, iOS, BlackBerry, Windows Phone, Kindle, etc.), then you can use the following code:

You would detect the requesting browsers user agent string, and then decide based on what it is if it’s coming from a mobile browser or not. This device is not perfect, and never will be due to the fact that user agents aren’t standardized for mobile devices (at least not to my knowledge).

Example:

You could get the user agent in javascript by doing this:

And then do the check’s in the same format as this (just using iPhone as a quick example, but others would need to be a little bit different)

Edit

You’d create a simple HTML page like so:

A pretty simple solution is to check for the screen width. Since almost all mobile devices have a max screen width of 480px (at present), it’s pretty reliable:

The user-agent string is also a place to look. However, the former solution is still better since even if some freaking device does not respond correctly for the user-agent, the screen width doesn’t lie.

The only exception here are tablet pc’s like the ipad. Those devices have a higher screen width than smartphones and I would probably go with the user-agent-string for those.

A simple solution could be css-only. You can set styles in your stylesheet, and then adjust them on the bottom of it. Modern smartphones act like they are just 480px wide, while they are actually a lot more. The code to detect a smaller screen in css is

Hope this helps!

I use mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)

So I did this. Thank you all!

Since it’s now 2015, if you stumbled across this question then you should probably be using window.matchMedia (and, if it’s still 2015, polyfilling for older browsers):

You can use the user-agent string to detect this.

I advise you check out http://wurfl.io/

In a nutshell, if you import a tiny JS file:

you will be left with a JSON object that looks like:

(that’s assuming you are using a Nexus 7, of course) and you will be able to do things like:

This is what you are looking for.

Disclaimer: I work for the company that offers this free service. Thanks.

This is an example of how to check if webpage is loaded in Desktop or mobile app.

JS will execute on page load and you can do Desktop specific things on page load eg hide barcode scanner.

Determine what the User Agent is for the devices that you need to simulate and then test a variable against that.

Device detection based on user-agent is not very good solution, better is to detect features like touch device (in new jQuery they remove $.browser and use $.support instead).

To detect mobile you can check for touch events:

The cleanest way of finding device type is:

(although it isn’t yet supported on Safari)

This is my version, quite similar to the upper one, but I think good for reference.

Another possibility is to use mobile-detect.js. Try the demo.

Browser usage:

Node.js / Express:

Example:

As I (kind of without success) searched for the proper solution for my hack, I want to add my hack here nonetheless: I simply check for support of device orientation, which seems the most significant diffrence between mobiles and desktop:

var is_handheld=0; // just a global if(window.DeviceOrientationEvent)

That being said, imho a page should also offer manual choice between mobile / desktop layout. I got 1920*1080 and I can zoom in — an oversimplified and feature-reduced wordpressoid chunk is not always a good thing. Especially forcing a layout based on nonworking device detection — it happens all the time.

Testing for user agent is complex, messy and invariably fails. I also didn’t find that the media match for «handheld» worked for me. The simplest solution was to detect if the mouse was available. And that can be done like this:

That will tell you if you need to show hover items or not and anything else that requires a physical pointer. The sizing can then be done on further media queries based on width.

The following little library is a belt braces version of the query above, should cover most «are you a tablet or a phone with no mouse» scenarios.

Media matches have been supported since 2015 and you can check the compatibility here: https://caniuse.com/#search=matchMedia

In short you should maintain variables relating to whether the screen is touch screen and also what size the screen is. In theory I could have a tiny screen on a mouse operated desktop.

Источник