Detect and differentiate Android Tablet from Android Phone via JavaScript? - javascript

I have seen Detecting whether Android device is a phone or a tablet with javascript but I want to know if there has been any newer, more stable way to do this as it seems the method described on the answer section is inconsistent.
Basically, I have a website that I have an Android app for but I only want to alert those who are on mobile devices as I want to show the full site to tablet users.

Another method would be to go by screen width/height. Tablets are larger than phones after all.
For example, if you know you're dealing with either an android phone / tablet check the screen.width property.
This method can be particularly useful if you're interested in taking advantage of larger resolutions which some tablets may have. Not all tablets will have a larger screen after all.
I'd advise against using User Agents. They're dependant on the browser which the user is currently using.

Related

Wrong device height and width on mobile phones

I'm trying to get the screen resolution of mobile phones in my Ionic app using platform.width() and platform.height().
Testing it with a One Plus One (1080x1920 pixels), it gives me 360x640.
Visiting this website with the phone gives the same values.
What's going on here? Is this normal behavior? I would think window.innerWidth() and .innerHeight() would work on mobile phone too.

How to detect tapping on the phone's backside?

I would like to detect user tapping on the device's back, NOT screen
Since users cannot touch the screen wearing VR headset.
It would be great if I can use JS for this, neither android studio or swift IOS is fine too.
Kindly, share your ideas.
This is one of the ideas: http://mylifewithandroid.blogspot.kr/2013/06/tap-detection-supported-by-gyroscope.html
Thanks
If there are no sensors for that, so it is not directly possible. Some devices have fingerprint sensors on the back, but those are small and not directly accessible from the code.
You could try calculating this using the gyrometer, but it would not be too accurate I fear.

How to find javascript properties which are only supported by mobile devices and tablets?

The basic problem is to detect mobile and tablet devices with JavaScript. I have a scrollbar plugin, and I only would like to display it on desktop browsers. I would like to use the mobiles/tablets default scrollbar if possible.
I decided to detect devices without the user-agent string, but focusing on mobile and tablet specific JS properties. Here are the properties I found useful to detect mobile/tablet browsers. I would combine them to make it work as accurate as possible.
window.screenX can not be different from 0 on mobile/tablet
window.orientation is "undefined" on the most desktop browsers
I you can help me with this, I would appreciate it. Is there any way to detect mobile/tablet browser in more accurate way?
Here is the link to another SO that covers detecting devices using javascript or jQuery.
Edit: However it does appear to utilize userAgent in the more popular answer. The second most popular answer does not use userAgent. It uses CSS media queries to detect, and Javascript checks against the media query to determine the device.
Hope this helps!
What is the best way to detect a mobile device in jQuery?

Making select control friendly on touch screens including Windows 8

I have a web page that I am trying to make "friendly" to touch devices. With the proliferation of devices with medium sized screens (small tables, large phones) my approach is to make one responsive layout with CSS and javascript tweaks where necessary. This is going pretty well, but I'm wrestling with select controls.
On my android phone and android tablets, the browsers that I've tested render a friendly large dialog when I touch a select control (I still need to test an Apple device), but on a Windows 8 touchscreen laptop, I am left trying to click the little select options. Other than just making the select control a very large font, is there already an established way to make the select more friendly?
I'm thinking of detecting ontouchstart then creating a pop up div with buttons or styled hyperlinks to give an experience like that provided by Android - but then I'd need to disable this on browsers that already handle select controls well...
Anyone have any advice? (I don't have any code yet, and this would apply to any select control)
The most friendly way to deal with controls is to not touch them at all. Let the browser handle them the best way it can — unless you're providing extra functionality like you can with Chosen.js
Usually, yes, setting a larger font size would help. http://css-tricks.com/dropdown-default-styling/

New method for getting device type for mobile webpages

I've been researching for a good way to get the devicetype to trigger mobile websites and many people still use script that gets the screen width/height in pixels to determine if mobile devices are used or not.
But mobile phones/tablets have extremely high resolution screens so we need to get another way to trigger a switch between normal websites and mobile websites.
Screen sizes are around 1,280 x 768 - 1920x1080 for mobile phones and 1920x1080 to 2560x1600 for tablets.
What is the correct error-proof method to determine mobile or not?
I'd like not to use javascript over php, if there's an easier method then javascript please tell!
you can make the mobile website responsive trough Media Queries in your CSS
It will overwrite your normal CSS for the website. Media Queries will check for resolutions and what you put in the media query will be shown like that in a resolution like that
http://webdesignerwall.com/tutorials/css3-media-queries
With Javascript you can do check the browser with the code I found on this page:
http://www.abeautifulsite.net/blog/2011/11/detecting-mobile-devices-with-javascript/
with that code you can redirect to a website specially designed for mobile website

Categories