Coordinate System and Layout

Synchro Units

Synchro uses a unified coordinate system across all devices and operating systems. This coordinate system is designed to make it easy to create layouts that work across a wide variety of devices, while maintaining a simple and efficient mapping to the underlying device coordinate system. When the term "unit" is used below, it refers to a Synchro unit.

The Synchro coordinate system places 0, 0 in the upper left corner of the screen/page, with values increasing down and to the right.

Phone-type devices are assumed to operate in portrait mode and will always 480 units wide. The native aspect ratio will be preserved, so the height will range from 720 units (3.5" iPhone/iPod) to 853 units (16:9 Android and Windows Phone devices).

Tablet-type devices are assumed to operate in landscape mode and will always be 768 units tall. The native aspect ratio will be preserved, so the width will range from 1024 units (iPad/iPad Mini) to 1368 units (Surface).

If controls overflow the screen size in either dimension, the page will automatically enable scrolling as appropriate so that all page contents may be accessed.

Device Metrics

Synchro provides the following device metrics related to the coordinate system, layout, and scaling:

• widthUnits
• heightUnits
• widthDeviceUnits
• heightDeviceUnits
• deviceScalingFactor
• scalingFactor
• widthInches
• heightInches

Device Units

Synchro exposes the concept of "device units" and provides the dimensions of the screen in device units via the widthDeviceUnits and heightDeviceUnits metrics. Device units represent the native underlying coordinate system of the device (a "point" in iOS, a "view pixel" in Windows Phone, an actual pixel in Android, etc). These units may themselves be scaled or transformed in some way by the device operating system to map to underlying display pixels (and will in fact be scaled on most contemporary devices, which will have displays with significantly higher actual native pixel resolutions).

The deviceScalingFactor represents the ratio of physical pixels (typically) to device units.

DeviceUnits * deviceScalingFactor = Pixels

The scalingFactor represents the ratio of units to device units.

Units * scalingFactor = DeviceUnits

Physical Measurement

Synchro exposes the physical dimensions of the device screen in inches via widthInches and heightInches.

There may be special cases where the layout needs to be modified for devices that are physically very large or very small, and these metrics may be used to make that determination.

There may also be special cases where controls need to be a certain physical size on screen. If you wanted to create a control that was exactly two inches wide on any device, for example, you could compute the width of that control in Synchro units as follows:

widthUnits / widthInches * 2