Justinmind-logo
 

Alignment on "View on Device"

JUNGSOO shared this problem 5 months ago
Solved

Hi,

I have simple five pages prototype, which looks fine on desktop client as well as in images exported. However, when viewing on device from my iPhone 12 Pro, the alignments are all messed up and even some textboxes are disappeared.

How should I fix this? Can I upload .vp file for your review and any correction? (I cannot upload my .vp file in this form - it says this .vp is incorrect file type)

Best Answer
photo

I'm happy to say it's not an error. What is happening is the screen of your phone is bigger than the resolution defined in the prototype. The button shows up centered because, if you select it and check in the Properties palette, you'll see it's marked as 'pinned to center'. That means that no matter how big the screen, the button will be placed always in the center of that screen. The other elements don't have that option selected so they remain at the coordinates you place them. The quickest way to make it work with any screen size is to go to 'File - Simulate - Settings...' and set 'Fit to screen' as the Scale option.

Replies (3)

photo
1

Hello,

Thank you for reaching out. When you simulate on your iPhone, are you simulating on a web browser or through the Justinmind app?

Thank you,

-Chloe

photo
1

Justinmind app - clicked "View on Device" from desktop client, and clicked "View on Device" on bottom of the Justinmind app. Attaching the screenshot from Justinmind app - you can see all content below the dark grey header is pushed to left and up. All other screens have the same issue.

photo
1

Hi,


I'm facing the same problem, View the simulation on my iPhone12 Pro with Justinmind app, all alignment went haywire.


Any solution to this?

photo
2

Sorry to hear that. Could you attach a screenshot of the simulation and of the prototype inside Justinmind to compare please?

photo
1

Hi,


I've attached it in here for your review.

photo
1

I'm happy to say it's not an error. What is happening is the screen of your phone is bigger than the resolution defined in the prototype. The button shows up centered because, if you select it and check in the Properties palette, you'll see it's marked as 'pinned to center'. That means that no matter how big the screen, the button will be placed always in the center of that screen. The other elements don't have that option selected so they remain at the coordinates you place them. The quickest way to make it work with any screen size is to go to 'File - Simulate - Settings...' and set 'Fit to screen' as the Scale option.

photo
1

Hi,


It works. Thank you so much for the tip


Cheers

photo
1

Glad to hear!

photo
Leave a Comment
 
Attach a file