Adaptive view for mobile device generates incorrect size to Axure Share

adaptive-views
technical-troubleshooting
#1

Hi all,

So, working on a project to make mobile app. I have a couple of adaptive views for a few different screen sizes that will be used by the clients to test.

The base view is for iPhone 6/6s/7/8 and is defined as width 375 and height 667. This should translate pretty well to the 750x1334px display that the models have.

When I upload the project (published out of RP9 9.0.0.3628) and is viewed with the Axure Share 2.2.2.18 for iOS, the dimensions of the view output into Axure Share seem to be off. When viewing the project with the setting "Original size (100%), that particular adaptive view becomes roughly 55 points too wide and 120 points too tall.

This would be possible to circumvent using the “scale to fit width” function in the Axure Share app, but it isn’t possible since the error introduced is not the same aspect ratio as the display. 120/55 is 2.18 compared to 667/375 which is 1.78. This means, that when I choose “scale to fit width” the project is still a tad too tall and leaves me scrolling up/down to view the labels on a tab bar I have at the bottom of the project.

On another adaptive view for iPhone+ sized screens in the same project (with dimensions 414x736) the width is generated correctly but an error in the vertical dimension on the order of 15 points is generated, leaving me again to swipe up/down to view the labels on the tab bar.

Project file attached. I have added some columns on the Login page to estimate the error.

2019.01.08 Yohto.rp (790.5 KB)

Thankful for any help. Is this something that I’m doing wrong or is some error happening in the generation of the project? Has anyone else seen this before?

// Magnus

#2

Hi Magnus!

I’m sorry to hear that you’re experiencing some issues with your project’s adaptive views!

Just to clarify, it sounds like you experienced some incorrect sizing where the adaptive view was around 55 points too wide and 120 points too tall for your mobile device’s viewport. Could you please let me know which adaptive view and which mobile device was in use when you experienced this issue? Could you also let me know on which page or pages you saw this discrepancy occur in your project?

In regards to the smaller vertical scrolling issue you encountered with your other adaptive view, this discrepancy could be due to the height of the mobile device’s status bar. Modifying the height of the viewport so that the status bar’s height is excluded should allow for the project to display without scrolling. For example, changing the height of your largest adaptive view from 812 to 768 to accommodate an iPhone X’s status bar’s height of 44 points should allow the adaptive view to display on an iPhone X without scrolling. Let me know if this modification assists with this issue!

#3

Hi Chelsea,

Well I have seen issues on an iPhone 7 (with the 375x667 adaptive view), where I indeed found the roughly 55pt too wide and 120pt too tall issue.

Then I have seen on an iPhone 7+ (with the 414x736 adaptive view) that it is just a tad too tall.

Thanks for the hint on the status bar. Checking the settings for the Axure Share project, I noticed that the “Show Status bar” switch was in the enabled state. Disabling the status bar makes the iPhone7+ test case (414x736 adaptive view) render nicely. With “Original size 100%” setting in the Axure Share app, it fits perfectly on screen.

After disabling the status bar, the adaptive view for the iPhone 7 (375x667) is now of the right proportions. When I choose “scale to fit width” instead of “original size 100%”, I can get that one also to fit nicely.

So a key takeaway is: if planning to use Axure Share app, if using the viewport sizes mentioned in many places then make sure to disable the status bar. And, it seems that this has to be done on each device viewing the project - even the same user account on two different devices has to disable the status bar separately on both devices.

The original size for the 375x667 adaptive view is still generated as too big. Attached some photos of what it looks like on the iPhone 7 with the two settings. These are photos of the login page but the issue concerns all pages.

screens.jpg1214×1506 370 KB

// Magnus

#4

Hi Magnus,

Thanks so much for this additional information about viewing the project on your iPhone 7. I was able to see this issue when taking a look at the project using an iPhone 7 emulator, and I was able to reproduce this issue as well with a new file. It looks like adaptive views are behaving unexpectedly when two adaptive views are using the same width value. Both the iPhone 7 and the iPhone X adaptive views use a width of 375, but the iPhone X view is unexpectedly showing when the project is viewed on the iPhone 7. I saw some improvement in this behavior on my end when I removed the width-specific values from these adaptive views. I’ll be attaching this modified document for you to take a look at. Please let me know if it allows the correct adaptive view to load on your device!

2019.01.08 Yohto_edited.rp (792.6 KB)

Because this behavior is unexpected, I will be filing a bug report regarding this issue on your behalf.

Additionally, I found that the green, horizontal rectangle widget on some of your pages is rendering incorrectly—it is rendering the contents of pages Login Page and Register Time Page as being 376 wide. Moving the rectangle by one pixel, or replacing the rectangle with a new one should resolve this issue. I’ll be filing a bug report regarding this as well.

I hope this helps some!

closed #5