I'm putting together some screenshots for an iOS app I've created. Due to my Macbook being too slow to effectively run the simulator, I'd like to create the screenshots in my browser using something like Chrome's Dev Tools.
Apple guidelines state that I need to submit very specific sizes. For example, the 3.5" screen needs a screenshot that is:
640 x 920 pixels for hi-res portrait (without status bar) minimum
So I go in to Chrome's developer tools and switch on screen size emulation. I pick "iPhone 4" from the list. The preview matches what I see on my actual iPhone 4, so I grab a screenshot, but the resulting file is 1/2 of the necessary size (320x460).
So I set the device to "responsive" and type in 640x920, but now the preview doesn't match my actual iPhone, due to media queries kicking in.
Can I force Chrome (or Firefox, or whatever browser) to display the content as 640x960, while using the media query styles of 320x460?
I tried this in Firefox and found that if I set my size, then set my zoom to 200%, it matches my actual iPhone 4, but when I take a screenshot, the dimensions are back to 320x460. Even when I double the size (1280x1920) and set the zoom to 400%, it again goes back 320x460