Application on PhoneGap, how to deal with fragmentation?

Question

HTML

Can you please tell me how to test the display on different devices?
I can't figure out how to type...

Answer 1

Go to the Chrome devtools (on the desktop), in the Overrides tab of the settings, check the show Emulation checkbox, then click on the show drawer button next to the settings gear, switch to Emulation in the bottom tab. You can emulate a lot of things, but this will give a rough idea of ​​​​how the page will be rendered (as I understand this is the task), without the features and speed of JS; support for html5 and css3 in different versions of operating systems. I can add on my own that a lot still depends on the device: for example, iPhone 4+ inside phonegap with initial-scale=1 in the viewport says that the screen size is 320*480 (568) and devicePixelRatio=2, and my Meizu MX2 (and on other phones chaotically noticed) - already the real screen size is 800 * 1280 and the same devicePixelRatio = 2.
I struggled with fragmentation head-on: I usually typeset several basic options, focusing on the screen width: 320, 480, 540(640), 720(800), 1080(1200), and then, depending on the size of window.innerWidth , dynamically loaded the required style file . The styles are rubber between each other, i.e. 320-479 is valid 320y, 480-539 is valid 480y and so on.

Answer 2

Take n devices and check. Otherwise, alas, no way. As time goes by, you will come across more and more features of mobile webkit and webkit in general, and there will be fewer questions.

Answer 3

Native iOS emulators 99% repeat the behavior of a real device, with android it’s a little worse given the zoo of devices, but it’s impossible to physically test for everyone, a couple of popular devices will have to be tweaked, the rest is again using emulators. And it’s better to type in rubber, all sizes in rem and target the main screen sizes using media queries.