: Iphone mockup larger than actual phone I am told that the iPhone 6 is 375 pixels in width. When I place an artboard in Axure (or Adobe XD) of 375 pixels, it is larger than the actual phone.

@Kaufman565

Typically in a vector tool like Adobe XD you'll want to design at the "CSS pixels" size of the screen, which really is 375x667 in this case. An iPhone 6 actually has twice that many pixels in each dimension, but they're also half as small — that's what people mean by "2x" DPI. It's usually best to design at the 1x size and let the tool (like XD) scale up the number of pixels automatically as needed when you're exporting PNG assets.

Usually that gets you a pretty close match to the size of elements you see on your screen, and the size of you'd see on your phone if you hold it up next to the screen. It's not a perfect match, however, since the DPI of different computer screens varies a bit — very few screens are a perfect match, or a perfect multiple, of the iPhone's DPI.

Two options for getting the sizes to match better:


Zoom the design tool view in/out until it looks the same size as your physical phone. You won't really lose any fidelity since you're still designing with vectors.
Use on-device preview to preview your design directly on a phone in real time as you work. In Adobe XD, you can easily do this just by plugging your phone into the computer with a USB cable.

Vote Up Vote Down

@Berryessa866

The simple answer is in how you generate your HTML or how you publish to Axure Share. The key is in the settings for the generator.

If you choose the menu Publish > More Generators and Configurations... you are given a list of all the generators. By default you have four options:


HTML 1
Word Doc 1
CSV Report 1
Print 1


The HTML 1 is the one you wish to edit, do this by double clicking the entry.

This gives you the editor for the generator. The Mobile/Device entry is where you can specify options that create the viewport tag and attributes for the header of your generated HTML. Select the Mobile/Device entry.

The option you need is disabled by default, choose the Include Viewport Tag.

Set the Width to the size of the width of your mock-up. You don't have to use the physical pixel size of the device your using. But it does help if the ratio between height and width match your target device (iOS or Android). You can use the width or the height, I tend to use width, that way it doesn't look too bad on Android and iOS.

Make sure you clear out initial scale, select prevent vertical page scroll and select Hide browser nav. The second last will stop your headings scrolling off the screen, but means you need to manage scrolling in your mockup. The last one is important so that you don't see the nav controls in the browser when you launch it from the home screen.

You can also set the home screen icon. This is really nice for iOS and Android. When you have your mock-up open, choose to bookmark/save to your home screen. When you do this it will use the icon you included.

The iOS Status Bar is worth considering. I sometimes hide it, or set it to black-translucent.

You can try the splash screens, but I never got them working.

Note: Cannot upload images for some reason, will edit with screen shots later

Vote Up Vote Down