Can I auto-adjust prototype width to fit device screen size?

rp-7
#1

is there a way to auto-scale prototype to fit to a greater width on the device? Say I have prototype that is 680x950 and I want it to auto-expand and fit by width on 1080x1920 tablet. Quality doesn’t matter at this point, I just don’t want User to manually scale it for different devices and it’ll be quite difficult to create adaptive views?

#2

Hi strelec,
Try to viewport settings in Generate-> Generate Prototype-> Mobile/Device.

I hope it will be useful for you.
Thanks,
Vikram

#3

I made this post after trying a lot of settings. If you know which settings work so that it fits ALL devices with greater width please post it here. I couldn’t find any.

#4

any thoughts?

#5

Hi Strelec,

One thing you can try is to set the viewport width to 680 pixels, specifically. This is based on the assumption that a mobile device will see the width=680 and know to respect that when displaying the content; in turn, the content should scale up or down as needed.

In addition, just make sure to clear the “Initial Scale” to retain the flexibility, so to speak, across different devices–like so:

Screenshot | Viewport Settings

Hope this helps!
Alex

#6

Hi Alex, it worked fine. thank you so much!
One more question: is there a way to stretch prototype to fit to both width and height of the device? Like for example if prototype was oriented for 4:3 ratio and I fit it by width - it will have large blank space in the bottom of the page on 16:9 device, so in this scenario (disregarding any quality issues) - is there a way to stretch prototype down to fit to full screen?

#7

Hi strelec,

Sorry for the delay replay. I am busy with my client projects. so, i can’t reply immediately.
Alex clearly explained above the post.

Try to attached screenshot Viewport Settings.

Capture.JPG677×602 55.5 KB

Thanks,
Vikram

#8

Vikram, I’m not demanding immediate answers and you totally don’t have to respond to this thread. Also, your solution doesn’t work :slight_smile:

#9

Hi Strelec.

Hmm, currently I don’t think there’s a particular configuration in the viewport settings that can scale in such a variable way, to potentially accommodate all device sizes across platforms. As you mentioned, this kind of situation is starting to approach Adaptive Views territory, and I’m afraid my recommendation at this point might be to use that instead. :confused:

Alex

#10

I think the following is what you want, and it logically fit any smart device screen.

Width --> device-width

Initial Scale —> 0 <<this is the point.

#11

Hey everyone,
I basically have the same problem. My prototype is 1024x768 and I want it to auto-scale and fit by height on an 1280x800 tablet. Sadly setting the viewport height to 768 pixels, specifically, did not help. (I also left the Initial Scale field open) Any ideas why it doesnt work? Any help would be highly appreciated.

#12

Hi S:R.,

Can you try setting the device-width to 1280? I believe the other fields can be left blank. But if that change doesn’t help, please don’t hesitate to attach your .rp file and we can take a closer look at the project setup. HTH!

#13

This is not working for me…

Trying every variation I can for Width (“device-width” or fixed value), Initial Scale (1, 0, or blank), and User Scalable (no or blank), but nothing works…

Using Axure 8 (v8.0.0.3338)

Any ideas?..

thanks in advance

#14

Hi platypusman,

Would you be able to attach a copy of the RP file you’re currently working with? If you’re able to provide the file, we can take a closer look and try to figure out some potential solutions.

If you’d prefer not to post your file here, you can always shoot us an email at support@axure.com–we’ll be standing by!

#15

Sure. Here’s a link:

http://uhbw1n.axshare.com/home.html

Screenshots of how it appears on mobile (using iPhone6Plus) :

RP file attached.

mobile-device-width-test.rp (47.5 KB)

thanks!

#16

Hello!

Can you try the edited RP file attached? The generator includes the mobile device-width set to 320 and cleared initial scale:

mobile-device-width-test_320.rp (47.4 KB)

Hopefully that helps!

(Edit: including an article link for reference.)

#17

Hurrah, that worked! (Though I’m not sure I understand why… : )

Screenshots:

Thanks!

#18

@platypusman Please follow the below steps. i hope it ll work.
For Web:

  1. Click on a blank place in the canvas, or use the outline to select the page (the highest level item in the outline) to get to the page properties:
  2. In page properites, Create a case for the OnWindowResize event.
  3. In that case, set the width of the items you want to be full screen to be [[window.width]]

For Mobile: Create the layout with in the device size as proper.
iphone 6, 7, 8 -> 375px 667px
iphone x-> 375px 812px

closed #19
unlisted #20