#ASPECT RATIO CALCULATOR APP SERIES#

This accomplishes goals 1–5 while obviously failing to accomplish goal 6. Ask the user to resize their browser window or reorient their device to better fit the app. One would begin by choosing either the 3/4 or 4/3 layout for the app, and then choose one of the following options: Note that it’s quite possible to meet some goals while only querying viewport width. Do not ask users to adjust their viewport to accommodate the app Controls component is as large as possible while accounting for 1–4Ħ. Board component is as large as possible while accounting for 1–3ĥ. App AR is always ~3/4 or ~4/3 (these two ARs cover most use cases while requiring the user to be familiar with at most two app layouts)ģ.Title, Board, and Controls components are always fully visible.In this article I’ll be discussing the aspect ratios (ARs) of both the viewport and the app itself - essentially how best to have the latter respond to the former. Battleship uses square grids, so I’ll use a square board component in this project. I’m beginning work on a version of Battleship called Sandwich Hunter, so I’ll need to display a board component and a controls component, and they both need to be visible at all times. Furthermore, we might want those elements to be as large as possible based on the available screen real estate. However, there are cases where some elements (perhaps the primary elements) of an app need to be visible at all times.

#ASPECT RATIO CALCULATOR APP SERIES#

It’s easier to resize the app when it’s in its own window.ĭesigning for different viewport widths (from here I’ll use ‘viewport’ to mean ‘viewport/screen’) is perhaps a bit simpler, and it obviously works pretty well for scrollable material like paragraphs of text or a series of images. This article is my effort to share my results. I recently completed a project in which I set out to explore using media queries to detect and respond to aspect ratio and viewport/screen size (not just the latter).

Aspect ratio calculator app