Viewing prototype on Microsoft Surface or other 2-in-1 PCs

I wish to demonstrate a UI prototype for an embedded device on a mobile device of some kind.
It is already possible to view a published prototype on a mobile device without the web browser navigation bar showing. As explained here:
Is it possible to do the same on a Microsoft Surface or other 2 in 1 PCs?

  1. How can I hide the navigation bar in the desktop version of Chrome/Firefox/IE/Edge?
  2. How should the ‘Include Viewport Tag’ setting in the HTML generator settings be configured?
  3. How should the scaling be configured for a desktop browser?

Does anyone have any recommendation regarding displaying on a tablet vs. displaying on a 2-in-1 PC?

Thanks in advance.

Once you set your mobile viewport, all you need to do is to open the app from your axureshare mobile app and no address bar will be displayed.

Or you open the url from browser then you would need to open it with side map and the add to home screen as the axure tutorial

For additional support on mobile prototyping you can watch my tutorial if it would help

Also check out this website for different screen size and only use the CSS width and CSS height in your prototype

Hi James,
Your answer seems to be referring to using iOS or Android mobile devices, because you refer to the Axureshare mobile app and the Axure tutorial.
Are you able to help with my questions about Microsoft Surface?

When you’re building a mobile app (Mobile or Tablet) and you don’t want to show the browser address bar.

Then you would have to define you spefica screen size that you’re prototyping for. So the website I sent you can get the size of surface pro. or other devices

Just remember to set the viewport tag once that is set it will work on that device as if it was a mobile application (mobile phone or tablet)

Axure have a mobile app and when you open from the you can choose to ignore the site menu.

For me to actually solve this for you very well. I would need to see the screenshort of the application

For Surface and other 2-in-1 devices, you don’t need to do anything with the viewport; the browser will automatically scale for you (I use several 4K devices and never have to adjust/use the viewport tags - the browser just does it magically).

As for hiding the address bar on those devices, all browsers use F11 to go in full-screen mode (both Mac and PC). On the Surface, you may also have to hold down the Function key as well - depends on your settings. This will get rid of everything except the page itself. I use this often when showing to clients. It’s also handy to make sure they’re not getting the URL if that is a concern.

In full-screen mode, you will still get scrollbars if your content warrants it - so keep that in mind.

If you are sending the prototype to a client (e.g. they’re clicking on the URL), and they are having a hard time wrapping their head around the fact that it’s a browser and not an app - I would just include a note in the message to use F11 once the page has loaded and use it again when they are done.

Thank you both for your replies. The answer from ChiJoshuaChr is what i was looking for. Showing to clients is exactly the use case.

EDIT: after some testing on my laptop it appears that it is not possible to scale the published prototype when displaying on PC browsers. i.e. my browser is 2560px wide; the prototype is 800px wide; I want it to fill more than 31% of the screen width when published

Can anyone confirm that this limitation is true?

@ChiJoshuaChr : Do your devices really scale the prototype in the way I describe above?

If your viewport is 2560px wide, but you only built the prototype to be 800px wide, then it won’t fit. Instead you can either build your prototype to be 2560px wide, or add an adaptive view for that size.

Attached is a copy of my screen with an 800px box done in Axure.

You may need to look at your screen scaling (under Display Settings)

But what’s the size of the div in the browser? 800px in Axure should translate to 800 px in the browser (CSS). The number of physical pixels might vary depending on scaling or display DPI.

Is the browser reporting the viewport width as 3840 or is that the number of physical pixels?

@nkrisc800px in Axure should translate to 800 px in the browser
Yes, this is what I see. This screenshot from Firefox shows that the prototype is published at 600px wide.

I can’t find any export settings in Axure that affect the scaling, so perhaps display scaling in the OS is the only way to do this.
Here it is with Windows display scaling at 200%

There are only a limited number of scale options in the OS, so this does not really achieve what I was hoping.

The reason I need to do this is because the embedded hardware I’m designing for is not available yet, but i want to test the UI at the correct physical size. It looks to me like I will be better off doing this on a tablet where viewport scaling is possible. Please correct me if my assumption is wrong.

I think I understand now. You have a known resolution you’re targeting for the device you’re designing for, but you also want to see it at the correct physical size. This is going to come down to DPI (or PPI). Let’s say the device you’re targeting has a physical dimension of 8" in one direction, and its resolution is 800px in that same dimension. That means it would have 100 pixel per inch. That means a 100px by 100px square in your design would have a physical size of 1" by 1". In order to test this then, you need a display that has the same DPI (PPI) as the device you’re targeting. Alternatively, if you have a way of scaling your design to match that could work too.

1 Like

Thank you all. I now understand the limitations of the viewport tag when viewing on a desktop browser.