Viewport suddenly stopped working for one prototype

I have two prototypes.

On one the viewport works on Axshare as expected. The view fits on a phone perfectly.

The second one, which I copy and pasted from the first, doesn’t not. It acts as if the viewport is not turned on, or set. Please see the screens shots of the respective viewport setup.

Hi,

To confirm, are you viewing the prototype in the Axure Share mobile app or are you using your mobile browser? If you’re using the mobile browser and are on iOS, then please verify that the sidebar is closed (not minimized) to ensure that your viewport settings kick in correctly. If that doesn’t do the trick, then please let us know which device you’re targeting with those settings, and whether those are the same settings that you’re using for the prototype that renders correctly. Thank you!

I am using AxShare mobile app on a Pixel 2 android and on a iPhone.

I just tried right now . . . these are my settings. The width and height match the size of the wireframe.

When I view on the phone its HUGE and seems zoomed in 2x at least.

Thanks for following up with that. So it sounds like the numbers that you’re putting into the width and height fields for the viewport settings are the width and height of the prototype on the canvas, not the width and height for the viewport of your target device. To build a prototype for a mobile device, you would typically look up the viewport of your target mobile device and build the prototype according to those dimensions; you would then be able to publish the prototype with the default mobile settings (width=“device-width”, height=blank, initial scale = 1.0) and it would fit that target device. However, if you’ve built your prototype to be larger than the device that you’re targeting, then you’ll want to use initial scale to scale the prototype down from its current size to fit the viewport of your target device.

For example: the viewport of a Google Pixel 2 (non-XL) is 411x731, and your current prototype is 866x1369, which is too large. If you set the initial scale to .4746 (i.e. 411/866) then this will scale down the prototype to fit the 411 width of the Google Pixel 2.

These settings should also work:

Hopefully that helps!

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.