How to make Xd browser prototype 100% zoom by default?

[Jason Ober]

Hello!

When I use the "Share" link in a Usertesting.com test, it opens the prototype at a reduced zoom level for the users, both when I set it to "fullscreen" mode on and when "fullscreen" is off. I'm doing unmoderated tests so am unable to explain how to adjust, and it's negatively impacting our feedback as people comment the text is too small, or about the large size of the white "bars" on the left and right sides.

My artboards are 1500px width and multiple heights (usually 3000px or more), but the issue happens on all of them. It's been multiple tests and multiple files. Generally, my Scrolling is set to "Vertical" and "Viewport Height" is 1280. I tried changing the "Viewport Height" to 1080 and 800 and it still displays at different Zoom levels. =(

This happens in mulitple browsers. Both mine, and the users reviewing my prototypes.

How do I make preview links open at 100% zoom so everyone reviewing my prototypes, regardless of technology, can view them in a usable way? Or if there's another solution I'm missing, please do share.

It's similar to this "Shared prototype not displaying at 100% zoom by default" issue, but mine is opening at a reduced zoom level, making the prototype much more difficult to use.

Thank you!
Jason

[jiaqi_1542]

Hey Jason, 

I have exactly same concern. Did you find a solution after? The only solution I can find is from this post: https://community.adobe.com/t5/adobe-xd-discussions/desktop-preview-is-not-displaying-a-full-screen/.... But it only works on screens with specific size, if I drag it to another monitor with different size, the white bar on both sides will show up again.

Thanks.

[Spas K.]

Hey there! If I understand correctly, you want the width of the artboard to stretch to the width of whatever device it's opened on, but keep the size of the elements the same. This is not how Xd works, and not possible. The prototype is a glorified screenshot, and it will not act like a responsive website. If you open it on a screen that's smaller than the artboard dimensions, everything will be scaled down by default. However, if you open it on something with larger dimensions, you will see empty space on the horizontal or vertical axis, depending on where the difference is. So you will want the Zoom percentage to be either larger than 100% or lower than 100% depending on the device, but this will still not give you realistic sizes of the elements on screen.

There is no responsive resize in Xd, which is the best solution to the problem at hand. The safest bet is to tailor the prototype after the users with smallest screens, and for ones with larger screens, while they will see blank space, they will at least see elements at their 100% size.

If you have Scrolling: Vertical enabled on the artboard, and the viewport height is anything larger than the height of the browser window, it will be scaled to 100% OR fitting the width of the window if it is narrower than the prototype. However, if the browser window is wider than the artboard dimensions, the prototype remain at 100% and you will get empty space on the sides.

[jiaqi_1542]

Hey Spas, thank you very much for explaination and solutions. 🙂