According to Chiptrolls, these are specifications of Galaxy M31:
6.40-inch display( 1080x2340 pixels) with an aspect ratio of 19.5:9
If I add this device using the specifications to my chrome device emulator (1080x2340), it doesn't match with my real device screen, actually the resolution that I found was (420x860).
Is it a bug?
Do I need to use some calculation?
My smartphone isn't a super wide screen tv full hd:
https://www.chiptrolls.com/specs/Samsung-Galaxy-M31/2951#.YuhOSNJKjio
What would cause a 2560px wide device to claim to be 1138 pixels wide? It it because it's Android? I'm getting very different font size compared to dev tools on a desktop and a div sized to 2560px wide is 2.5X the width of my page on the tablet. I'm super confused. Tried every meta tag and forcing it to be 0.45 device with seems very wrong and hacky.
document.body.clientWidth
My iPhone 6 says 667px which is correct. Desktop browsers return correct width too. It's just this Samsung s4 tab that seems to return ting dimensions and create gargantuan text sizes.
How can you determine the effective browser resolution (for CSS) of Samsung Galaxy Tab A 10.1 (or any other tablets)?
The specifications say that the resolution is 1920 x 1200. So I designed an application that will run on 800+ Samsung Galaxy tablets. Now I see that the resolution is wrong and I can't get the right resolution from the internet. Of course the app is responsive but I would like to make use of a testing tool in the browser.
My goal is to add this correctly to my Chrome developer console.
Specs: http://www.samsung.com/uk/tablets/galaxy-tab-a-10-1-2016-t580/SM-T580NZKABTU/
A very cheap means of finding your device's web browser resolution could be to simply determine it's viewport dimension.
While there are a ton of apps out there to get the information for you, a basic website such as http://www.mydevice.io/ can help out with this.
This website should also help give comparisons of other devices if you don't have the device yourself.
I would presume the Samsung Galaxy Tab A 10.1 should be 800 x 1280 for CSS media queries.
I have converted my website to android compatibility with using of CSS3 Media Queries(I just changed CSS only). My android device dimensions are 1280x 600. Its working fine in android devices.
But when I turned my desktop to 1280 resolution the design is changed (like how i wrote for android device). But it shouldn't come like that.
Only for devices i have used the css below
#media only screen and (max-device-width:1280px){
}
What is the mistake i have done?
That query affects every device with a max with of 1280px, not only mobile.
I am developing a mobile website, and I've come across an interesting issue.
I'm testing on my desktop, as well as on my Motorola Droid (Android 2.2). I have media queries set up to load 3 different stylesheets (320px wide, 480px wide, and 640px wide). I noticed that my Droid is loading the 320px stylesheet despite having a 480x854px screen. I set up a little JS to find out what the screen width is, and it's reporting 320px.
Does the Android browser run in MDPI on HDPI screens? It's scaling the 320px properly to fill the screen, but I'm a little confused why this is happening.
Also, I do have <meta name="viewport" content="width=device-width"> on my page, so that is not the issue.
Many OEMs have chosen to set their default browser viewport dimensions based on those of the iPhone (or similar resolutions) despite having an altogether different resolution. Apple had a similar problem with the release of the 'retina display' on the iPhone 4 where the spec sheet states 640px across, but screen.width will return 320px when is set.
As #omermuhammed mentioned base your logic on screen.width, CSS #media queries AND/OR device detection using WURFL or DeviceAtlas.
The following article may also be of interest in helping to clarify the issue:
A pixel is not a pixel is not a pixel by #ppk
http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
I don't know in context of Android Browser, but I have seen handsets where Android reported wrong screen size. I would recommend basing your logic on a combination of user agent string AND screen resolution. This way you can detect this handset and handle differently, and use normal mechanisms with others.
I have noticed a few issues with getting screen.width and screen.height on Android 4.2.
Dimensions are not updated to reflect the orientation of the device.
You can correct this if you wish to by first getting orientation, then switching the values accordingly.
http://menacingcloud.com/?c=orientationScreenWidth
http://davidwalsh.name/orientation-change (nice matchMedia usage)
OS user interface elements are subtracted from the actual device screen dimensions.
E.g. nexus 7 screen is 1280x800, 1205x800 is reported. 75px for the OS buttons.
Ideally (in my opinion), the values should be reported in CSS pixels, not device pixels.
E.g. nexus 7, CSS viewport is set to 600px in portrait, but screen.width reports 800px. So DPR is approx 1.33
Overall, screen.width and screen.height are not very reliable (iOS has orientation issues as well).
I'll hopefully re-edit this answer with more detail soon.