How to set a tablet device dimensions on a web browser - android

I am using flutter for developing an android app optimised (from frontend layout perspective) for a specific tablet (Galaxy tab A8).
Specs for tablet are -
Resolution: 1920x1080, 16:10 ratio (216 ppi density)
Dimensions: 9.72 inches x 6.37 inches
The issue is that I do not have the tablet physically and my machine is too low powered to run an emulator hence I need to rely on the chrome/web for development.
Now when I try to use the chrome dev tools and and plug in the resolution in the responsive settings, the screen I get has way more space than the actual device and hence I am not able to optimise specifically for that device.
I think the device dimensions has something to do with this issue but there is no option to set the dimensions for the browser window. How do I set the resolution in chrome dev tool so that it matches my device. Is there any conversion factor?

Related

Resolution disparity when emulating device on chrome

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

Determine the right tablet browser resolution for webdesign

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.

Change Density Using AVD Manager

I have created 3 Device Descriptions that mimic the latest models of Samsung mobile devices (S2, S3 & S4). Although I enter the diagonal screen length and pixels (w x h), I am unable to see a change in density across the 3 AVDs when I start them using the AVD Manager (screen caps below). Did I miss something or does the tool support density changes? Also, this is poorly documented.
After a quit and re-enter, things worked fine but the density value never updated, always reads 320 - probably based on my laptops screen. Also DON'T use option 'Scale display to real size". Let the emulator do the rendering and move app to device for native testing.

why the emulators have different sizes than the mentioned ones

Why some devices are for example 2.7 inches and when you launch the emulator the real size is not 2.7 inches..?
Edit:
And will the display on that screen be like the real display or will it differ on real devices?
You can start the emulator to have the same number of pixels or to have the same size as the real device. You cannot have both since the density of your screen in general differs from the density of the device.
If you specify to have the same size and the actual size still differs, then your OS did not correctly recognize the density of your screen.
The density of the screen on the development machine is normally lower than the one of the device. A pixel perfect emulation of the device screen will therefore only be achieved when you choose the same pixel size. But then, the emulation is very good since the emulator runs the same code and operating system as the real device.
This you can set while launching the emulator. You will get an option of scaling display to real size but that will appear very small on your computer screen. So better use the default size which fits to the screen.

Will samsung GS 4 be a Large or Normal sized device for Android layout purposes?

The upcoming Samsung Galaxy S4.
Reported Specs:
1080 x 1920
4.99 inch diagonal
If I plug that into a new Device definition in AVD, the resulting device size is listed as "Normal" and the Density as "xxhdpi", screen ratio long.
However if I put in a diagonal of 5.00 inches the size changes to "Large".
What to tust?
More generally: Does the AVD device manager match exactly the logic used on Android devices in determining what layout bucket to pull from (unless manufacturer overrides)?
Edit: note regarding the above sentence: When you enter the diagonal and screen dimensions the AVD dropdowns will automatically configure themselves according to those values.
And please oh please don't direct me to the dreaded "Supporting Multiple Screens" page which does not give exact logic.
Will samsung GS 4 be a Large or Normal sized device for Android layout purposes?
You will know when everybody else knows, when the device ships. Samsung can choose whatever it wants for the screen size.
Does the AVD device manager match exactly the logic used on Android devices in determining what layout bucket to pull from (unless manufacturer overrides)?
No, the "AVD device manager" uses whatever screen size bucket you chose when you created the device definition. There is a drop-down listing the various choices.

Categories

Resources