iPhone 5 prototype content cut off in portrait orientation.

Austin Brown shared this problem 5 years ago
Solved

When I test my prototype on an iPhone 5 (open the link in safari, save to homescreen, open from homescreen), the content gets cut off just before the bottom of the screen. I built the prototype on an iPhone5 template. It's not enough to make me think the problem is that it's rendering for 4S resolution(though it could be?).


The content is still below the fold (I can drag the screen up and see the rest of what's missing) but it's not visible due to the screen being cut off. Any advice? Did I miss something simple?


Thanks in advance

Comments (9)

photo
1

UPDATE: Just noticed that the viewport is the same dimensions as it would be on a 4s. It is shaving 88(176 retina) pixels off the browser window (half from the top and half on the bottom), and pinning the screen content to the top of the now smaller window.


Basically, the viewport is set for iPhone 4/4s screen size even when running on an iPhone 5. It's not adding the extra vertical resolution.


Open this link on an iPhone5 to see an example: https://www.justinmind.com/usernote/t...


Below: Note the black bars are not part of the design.


626e9ba7043539d375b0105347e451b6

photo
1

It looks like this is because the viewport is set to "width=device-width":


http://taylor.fausak.me/2012/09/20/ip...


and http://www.mobilexweb.com/blog/iphone... under "HOME SCREEN WEBAPPS"

photo
1

Yes, this error was reported by another user some days ago. We are in our way to fix it for a future update.

photo
1

Thanks. Any idea of the timeline on this? I'd love to do my usability testing on a mobile device instead of mimicking it on a desktop browser. It makes a huge difference.

photo
1

Hopefully, by September. Meanwhile you can do the same this user explains in another thread:


JoJa15 6 months ago


OK, I solved the problem and now have a JustInMind Prototype running full screen on an iPhone 5. I had to edit some html so hopefully this will be easy for the JustInMind people to fix so you can do it through publishing as opposed to export HTML.


I learned about the problem at this site:


http://www.mobilexweb.com/blog/iphone...


The key lies in the viewport settings. By default when you export from JustInMind you get:


The problem lies in the width=device-width setting. Remove that and use the following:


Your iPhone5 app should now be full screen if you provided content at:


Portrait: width 320 height 568


Landscape: width 568 height 320


You will need to also use the following two settings:


This allows your mobile website to be used as a mobile web app. This was already set in JustInMind's export so no need to change it but I wanted to mention what it does.


This allows your web app to not be pushed down by the iOS status bar. This was already set in JustInMind's export so no need to change it but I wanted to mention what it does.


https://www.justinmind.com/community...

photo
1

I'm having a hard time figuring out what I am supposed to do on my end to test my prototype on an iPhone5. I don't know what any of the settings you mentioned mean. for example:


"The key lies in the viewport settings. By default when you export from JustInMind you get: " What should go after the ":"?


Same with "You will need to also use the following two settings:"


What am I missing?!

photo
1

What file should I be looking for? And where would it be located in the HTML export? I'm happy to do a little digging, but I'd need some guidance.

photo
1

You need to edit the index.html file following the instructions in this thread:


http://stackoverflow.com/questions/13...

photo
1

Fixed in version 5.6