Test Apps on iOS screens and create iOS Screenshots with Responsive Web Apps

Hi Thunkers :wave:

With the introduction of responsive web apps, you can now:

  • View your app on many different device screens
  • Create your own iOS screenshots!

To begin with, here is a list of screenshot sizes you need to publish to the App Store.

You can now create all screenshots necessary with Thunkable X!

1. Preview your app on different sized device screens:

First, publish your app as responsive web app.

Open the link in Google Chrome.

Click Settings > More Tools > Developer Tools to view app in Developer mode.

You want the console window to be on the side of the screen.
If it is on the bottom of the screen, click the three dots on the upper right corner of the developer console and use the images next to the text ‘Dock side’ to move this window to one side of the screen

Your project should now look like this:

In the top left hand corner of the dock, click the icon that looks like a phone and a tablet standing next to each other

Screen Shot 2020-04-07 at 12.36.41 PM

You will now see that your app looks like it is being viewed on a mobile device:

You can use the drop-down menus at the top of the screen to select different devices and screen orientation.

2. Create screenshots for this device:

Go back to the top left-hand corner of your console dock.
You will now see three dots to the left of the dock.
click on these three dots to open a menu, and click on “Capture Screenshot” in the menu.

A screenshot in the resolution of your selected device will be saved to your computer!

Big thanks to @darren for highlighting this option!

3. Further information on required screenshot sizes

As stated above, here is a list of screenshot sizes you need to publish to the App Store.

To get all of the screenshot sizes you need, create screenshots using the following device settings. Each device name will be followed by its corresponding screen size in the screenshot doc linked above.

iPhone X (5.8 inch screenshots)*

iPhone 6/7/8 Plus (5.5 inch screenshots)

iPad Pro (12.9 inch screenshots - suitable for iPad Pro 3rd gen and iPad Pro 2nd gen screenshots described in doc)

*5.8 inch screenshots are used as an alternative to 6.5 inch screenshots. There are two ways to upload these iPhone X screenshots to your App Store listing:

Upload 5.8 inch screenshots in Media Manager

When you look at your screenshot upload window, you will see the text ‘View All Sizes in Media Manager’. Click here. In the iOS tab, you will see a segment that says ‘6.5-inch display’. At the bottom of this segment you will see the text ‘5.8-inch display’. Next to this you will see a checkbox with the text ‘Use 6.5-inch Display’. Uncheck this box and expand the ‘5.8-inch Display’ segment. Click on ‘Choose File’, and upload your 5.8-inch screenshots.

Resize 5.8 inch screenshots to 6.5 inch screenshots

Use an image editor of your choice to resize your iPhone X screenshots from 1125 x 2436 pixels (5.8-inch Display) to 1242 x 2688 pixels (6.5-inch Display). Upload your new 6.5-inch screenshots to the App Store.

8 Likes

That’s a great idea. Also if anyone wants to have your screenshots nicely presented in app store visit https://app-mockup.com

4 Likes

Thank you @jane!!!
Great suggestion @eoinparkinson!!

3 Likes

I included a walkthrough of this in my latest publishing video. Check it here (Timecode - 04:39):

5 Likes

Well this is a much handier way! I’ll update my own post with this.
FWIW, I think that “Capture Screenshot” might be the better option there - If you are on a scrollable screen, “Capture Full Screenshot” will capture the entire length of the screen.
The attached image is what I saw when I took a screenshot of your YouTube video on an “iPad” in Chrome with the “Capture Full Screenshot” option!

Ah good to know!

I tried it with both and didn’t notice a difference - which makes sense now since my app didn’t have any scrollable pages.

I’ll update my screenshot above.

1 Like

My App scrollable page looked like crap in the webapp :confused:

feel like have to design my app all over again looks crappy. i notice some of my screen wont scroll to the top

but my files pdf and webviewer not show on web app so i can screenshot? please help me!

Did you specify a pdf @cong1_hachi1?

Are you using https in your webview?

my google sites only show on iphone but not show when i publish web app, so i can not screenshot for Ipad pro, please help me


my google site added in webviewer: videobaigiangtcc2

What do you see when you click on the “Preview as a responsive web app” link?

And, again, are you using http or https?

sure https, it shows:Screenshot_2 Screenshot_5

ahh - this is because Google Sites itself does not allow embedding like this.

I have just submitted my app to applestore but Apple does not agree because my Screenshot from web Apps not true for ipad pro. This my picture


and this is from apple

and this is my problem

Refer to @darren 's Video He tells you how to take screenshots