iPhone 5 UI fitting on entire screen

JoJa15 shared this problem 5 years ago
Solved

I am trying to design a UI for the iPhone 5 and am having a hard time getting my assets to fit on the iPhone 5 screen. There are two problems:


- First the assets at Retina resolution do not fit entirely on the screen. I see that a previous question was asked about this and the solution was to prototype at 320x480. I can certainly do that but my assets will not look high res like they should degrading from my presentation as well as causing the second problem below:


- The edges of my screen in landscape mode have black bars. If I prototype at the recommended size of 320x480 I get an aspect ratio of 2:3. The iPhone 5 has a 9:16 aspect ratio unfortunately.


Ideally I would like to be able to create my assets and prototype in retina resolution as well as be able to display my app at full screen utilizing the entire screen area of the iPhone 5.


Is any of the above possible?

Comments (22)

photo
1

If you resize your assets inside Prototyper, when you see them in iPhone they won't lose any quality. That's because in the HTML the assets will have their original size and the size is set using css.

photo
1

OK, that makes sense. I will give that a try.


Is their a solution for utilizing the total width of the iPhone 5 screen? Currently I can use the iPhone resolution guide but it leaves me with black bars on the left and right side of the screen. I would like to be able to fill the entire space.


Also thank you for the super quick reply!

photo
1

One update on this. I found another tool at http://www.proto.io/ that can do iPhone 5 mockups utilizing the entire screen. I prefer the JustinMind desktop app though as it is easier to use and more powerful. Is there any way you guys can figure out what they are doing and adapt it for your application? In their tool I am able to prototype at the iPhone 5 resolution and export to the iPhone 5 in the correct resolution and it utilizes the full iPhone 5 screen. I do not need to resize assets or work in a different resolution.

photo
1

Absolutely. In fact we are already working on that cause other users have the same issue.

photo
1

Set the resolution guides to:


Portrait: width 320 height 568


Landscape: width 568 height 320

photo
1

Thank you. I can't wait for that feature to be implemented. I love the tool and plan on subscribing. My company just needs to know that being able to properly design/demo iPhone 5 can happen.

photo
1

Thank you. That definitely helps for laying something out but in demoing it does not show the entire screen as the iPhone 5 has black bars on the left/right and you have to scroll to see the entire screen. It looks like based on your comment below you are working on solving that problem.

photo
1

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.

photo
1

Hi There! I have the exact same issue, but have not been able to resolve on a prototype I am working on.


Where can I find the viewport settings to update them as you mentioned to solve the problem. And once I do so how do I publish the prototype back to User Note to try it on my iPhone 5?


I am not very technical on the UI coding and am testing the free version before I finalize to buy the pro version for my company.


Thank you.

photo
1

Hi There! I have the exact same issue, but have not been able to resolve on a prototype I am working on.


Where can I find the viewport settings to update them as you mentioned to solve the problem. And once I do so how do I publish the prototype back to User Note to try it on my iPhone 5?


I am not very technical on the UI coding and am testing the free version before I finalize to buy the pro version for my company.


Thank you.

photo
1

I just tried this in the 5.5 version of Justinmind Prototyper and the problem still exists. :-(


I was really hoping that this would have been fixed as the process to export to HTML and then manually edit is more tedious then just using the publish feature within JustInMind. Is there something I am missing? I created a new prototype, I started with the iPhone 5 landscape template, inserted an image widget, resized it to the entire size of the iPhone 5 guidelines, and then clicked on the view on device option.

photo
1

You just need to resize your images to 320x480 inside Prototyper. Don't worry cause you won't loose any quality on the image when seen from a retina display.

photo
1

OK, I have an update on this. It seems like it works now within Safari but if I add it to my home screen as an app that I can launch from my home screen it goes back to black bars on the left/right in landscape mode.


I also tested an app in portrait mode and had the same issue when adding it to the home screen. On a side note custom app icons now work which I am really happy about. If we could just get the full screen working on iPhone 5 via simulate on your device and adding to the home screen I would be very happy. :-)

photo
1

Could you send an example to jim.support at justinmind.com please? We are unable to reproduce the error.

photo
1

Yah. I have the same issue and I don't see a solution here.

photo
1

You just need to resize your images to 320x568 inside Prototyper. Don't worry cause you won't loose any quality on the image when seen from a retina display.

photo
1

Hello Victor - Not sure that solves the problem. It does appear to be a device detection issue if you ask me. Is there some way in Prototyper to set the "View on device" size to iPhone 5? When I run it through Simulate the UI fits the entire screen but when I run it on my iPhone 5 the app is centered (top to bottom) on the iPhone 5 screen (i.e. the status bar does not go to the top of the screen and the background of my app also does not go to the full bottom of the view. Any ideas?

photo
1

We will run some tests in our own devices and see if we can reproduce the error. We’ll keep you posted.

photo
1

Take a look at this other thread:


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

photo
1

OK, sounds like your team is working on it but there is a work around available. I will see if I can do the work around myself - but I think it requires some experience coding the HTML (but will give it a try).

photo
1

Fixed in version 5.6

photo
1

Fixed since version 5.6