Mobile Prototype dartboard scaling problem

Why is it when you create an dartboard for ex. iPhone 11 Pro and you display it on iPhone 14 Pro using Sketch Mirror it scales up perfectly but when you do the same with Prototype it is never scaling up to fit the phone resolution?
It doesn’t make any sense. Both cases use the same dartboard measures.

Hey @SketchGhost, thanks for taking the time to share this. Indeed, this seems like a weird behavior. Most artboards will scale to fit as you mention, but not all of them. For example, an iPhone SE artboard will show black bars on top and bottom when you mirror it on an iPhone 14, but I do see the problem here.

It seems Prototyping will show the artboard in fullscreen only when the artboard matches the device (iPhone 14 artboard on an iPhone 14) but let us ask around and pass along this one to the team.

Hi again,

The team involved looked at this and will analyze what’s the best option to solve it

Is there any new information on this issue? We create protoypes to show them off and test them and my teammembers do not all have the same device sizes, so when I create a design for my iPhone 15 Pro I’d love it to be equally shown without black bars on a Max device (or even worse, an Android device of any size :stuck_out_tongue: )

Hi @CarmenAtBYTEPOETS , I have some good news!

This is already possible for any prototype you play in a web browser! To get rid of those pesky black bars, open your prototype on the web app and click on the Zoom Level dropdown near the top right corner of the screen. Select Fit width or press ⇧1 on your keyboard and copy the prototype’s link.

When you share the prototype it will display without the backbars in mobile! If you open it on Desktop, you will see just a tiny part since it will be like zooming in a lot on that prototype.

Try this file and test it on mobile browsers. It contains 4 different iPhone sizes.


Let me know how it goes :pray:

Thank you for this information. This is an improvement indeed, although, to be honest, this still is not the kind of user experience that I would expect in the end.
First, one has to save the link to the home screen so that the browser bars are not displayed, and even then, the status bar is filled with the system color and not hidden, so the prototype does not appear to be “native.” Second, I’d foremost expect the app to work seamlessly, as this is (presumably) the main presentation method when you have a Sketch license. Third, I’d love to see the web app detect whether the prototype is being viewed at a certain browser width on a desktop (and fits the content to the screen accordingly) or if it is being viewed on a mobile device and adapts to full width.
I would actually compare that with the InVision experience where mobile views were displayed without device bezels (so in full width) and desktop views added device frames and scaled the screens down.