0

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

0

I managed to solve this using Firefox 47.0. There's a second "screenshot" button that you can enable in the developer tools settings menu.

This button (as opposed to the "Responsive Mode" screenshot button) honors zoom settings, so setting the viewport to 640 x 920, then zooming to 200%, then using the dev tools screenshot button allowed me to take a screenshot that matched Apple's recommended size perfectly.

For 5.5" screens, I needed to set the zoom to 400%, but that's about it.

How to enable the second screenshot button

Your Answer

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.