Hi everyone,
If you’ve ever done any prototyping for mobile devices in Axure RP, you’ve probably seen the “Viewport Tag” settings on the “Mobile/Device” tab of the “Generate HTML” dialog.
The viewport tag is an HTML meta tag that contains information about the viewport size that mobile web browsers should use to display a web page. Without this tag, mobile browsers will often display web pages at a size not intended by the designer, so including the tag in your prototype’s generated HTML is necessary to ensure that your pages appear as desired on mobile devices.
Generally speaking, we recommend designing prototype content at your target device’s native viewport width and using the viewport tag’s default settings. For example, if you’re planning to view your prototype on an iPhone 6, you would want to design your page content at a total width of 375 pixels. If you need to account for more than one device width in a prototype, you can use adaptive views to create multiple layouts.
Occasionally, though, using different viewport tag settings may be appropriate for your prototypes. In those cases, it’s helpful to understand what each field refers to and how you can use it to your advantage.
Width and Height
These fields refer to the viewport width and height that mobile browsers will use to display your prototype’s pages. You can set these using numeric pixel values or the special values device-width and device-height. These special values import the target device’s native viewport width and height when the web page loads in the browser.
As I mentioned before, the viewport tag’s default values (which include device-width in the “Width” field) are all you need if your page content is designed for the native viewport width of your target device. If your page content is wider or narrower than your target device’s viewport width, however, and you’d prefer not to resize it in Axure RP, you can still get your pages to fit to the device’s screen. To do this, enter the page content’s total pixel width in the “Width” field and clear the “Initial Scale” field.
For example, if your page content is designed at a total width of 500 pixels, but you need to view the prototype on an iPhone 5, you could enter “500” in the “Width” field of the prototype’s viewport settings and leave the “Initial Scale” field blank. This will ensure that the iPhone’s browser uses a 500-pixel-wide viewport to display your prototype rather than the device’s native viewport width of 320 pixels, which would be too small and would display the prototype as though zoomed in.
Note: Using a set pixel value in this way can also be helpful if you don’t know which sort of device the prototype will be viewed on, since all mobile browsers will use the viewport width defined in the viewport tag settings.
In most prototypes, you’ll only need to enter a value for one field or the other, either “Width” or “Height” but not both. This will be the dimension that your page content needs to fit to. For example, a vertically scrolling layout should generally fit to the screen’s width, so you’ll want to enter a width value but no height value. For a horizontally scrolling layout, you’ll want to enter a height value but no width value.
Initial Scale
This is the scale that your prototype will be displayed at when it first loads in the mobile browser. This field accepts decimal values representative of zoom percentages. For example, 100% (or no zoom) would be 1.0, and 150% would be 1.5.
The default value for this field is 1.0, but you’ll want to clear that and leave the field blank if you set the “Width” or “Height” fields to a pixel value. On some devices, having an initial scale value set will reset the viewport to the device’s native viewport dimensions.
Minimum and Maximum Scale
These values represent the smallest percentage and largest percentage your prototype pages can be zoomed to by the user. Both fields accept decimal values in the same format as the “Initial Scale” field, and both can be left blank if you don’t need them.
User Scalable
If you don’t want your users to be able to zoom the prototype at all, you can enter no in this field. This will prevent the user from being able to pinch-zoom the prototype on mobile devices.