I am building a Cordova application and I recently started experimenting with testing it in Chrome dev tools. I imitate touch and work great. But when emulating the screen resolution of the device, everything became strange. I am currently working with the iPhone 5 screen, and the size of the device I use for this is 320x568. In Chrome dev tools, I set the device resolution to 320x568. When you run the application in Chrome, everything is half as much as it should be. Therefore, I performed width and height operations on the window, document, and screen objects.
$ (window) .width () returned 640
$ (window) .height () returns 1135
$ (document) .width () returns 1280
$ (document) .height () returns 1136
screen.width returns 320
screen.height is back 568
screen.width and screen.height are correct. The width and height of the window ~ doubles, and the size of the document is just weird. I'm not sure what is wrong with them, and what it causes. I understand that everything should be 320x568. What can I do to verify this?
google-chrome-devtools screen-resolution
jchitel
source share