Viewing on iPhone 5 with iOS 7

Hi All,

I’m not sure what’s going on, because it was working properly last Friday.

My prototype is 320x568px. When I exported it to AxShare on Friday and viewed on the iPhone 5, the prototype went all the way to the top of the screen and the status bar overlapped. Now, the prototype is being pushed below the status bar and it’s just a black strip at the top where the status bar is (it’s set to “default” in the export settings).

I’ve attached a test RP file, a screenshot of my export settings and a screenshot of what I’m seeing on my phone.

Is anyone having this same issue? I’m about to pull my hair out.
test.rp (59.5 KB)






Hello LadyUX,

I think the issue comes from the changed behavior of the status bar for iOS 7 and how Axure currently attempts to handle it.

From what I could gather, the implied use of the status bar in iOS 7 is to be permanently visible as a transparent element with content extending the full height of the screen below it. This is not to say that it can’t be hidden. See the following for details:

Apple Mobile HIG (pdf, page 138): http://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/MobileHIG.pdf

iOS 7 UI Transition Guide - Bars and Bar Buttons: https://developer.apple.com/library/ios/documentation/userexperience/conceptual/TransitionGuide/Bars.html

‘default’ should actually occupy the top 20 pixels (40 for retina) and push the prototype below it, so what you observed initially should not have worked.

I purposefully haven’t upgraded to iOS 7, so I can’t really test your file. However, if I had to volunteer a quick fix for you, I would suggest keep your design at 320x568, but instead of using ‘default’ for the iOS Bar, try ‘black-translucent’ instead. This should show the status bar on top your full-height content.

NOTE: You won’t be able to customize the status bar with this approach. If you want to do such customization, your best bet is to create the status bar from scratch and view the prototype full screen using a browser such as Dolphin or Mercury if remotely stored (haven’t tested it personally) or using GoodReader or CHM+ if loaded locally to device.

Hope this helps!

light_forger

1 Like

So sorry for the delay in saying thank you for your detailed response. I have no idea why or how I saw what I saw the first time (or perhaps I was just imagining it all)? I ended up going with the default and making my design 320x548. I think I played around with the black-translucent option, but it was still pushing the content down. I may still play around with it more, but the 548 is working fine for me right now. Thank you again!

Hello, im digging into all iPhone 5 subject and after reading lots of them, i still dont get why there is pixel lag. I’m doing a iPhone 5 retina app, and im having my file at 640*1136 and figured that i have to remove 40px ( 1096px) and that even if i make a shortcut of the page on my home screen, like an app, to get rid of the browser ui, but still, it needs 40 px to be removed.

Opening it in a browser and clicing in the page show me that removing those px is not necessary and i can see the full 640*1136px, but once opening the simili-app, i have to make it 40px less, i wonder where its physically going T_T

Hi Yvanobi,

What version of iOS do you have running on your iPhone 5?

Generally, the “default” and “black” settings should consistently push down the content by the height of the status bar. On the other hand, “black-translucent” shouldn’t push down the content, and it should simply be overlaid, transparently, on the content. That said, working with the status bar has proven to be rather finicky as of late; and it’s possible there are slight differences between versions of iOS.

Alex

Hello Alex, thank you for your reply, well, it was definlity the status bar and i figured that scrolling a bit in the window of the browser side could let the user " remove " the bar while on the app shortcut we HAD to see it, and setting it to transclucent fix it, sorry it was kind of a noob question.

Thx again !

Hi Alex, I am using iPhone 7 with IOS 11 and I found the black-translucent is not working as designed. My content is still pushed down. Any solution to this? Thanks,
Problem solved by adding the “viewtag-fit=cover” tag in the Mobile/Device Viewport Tag setting. There is no viewtag-fit field, so I had to add it to the User Scalable field (you have to use the last one). Type “no, viewport-fit=cover” in the field and you should be all set.