iPhone SE is not the smallest screen to target

In the web, SE(2022) has a wider viewport than the Galaxy S22

Setting and targeting a minimum screen size (more precisely, viewport) is important in front-end development. In 2022, I have chosen iPhone SE (2nd and 3rd generation, not the 2016 variant that looks like iPhone 5S) as the minimum screen size, since it is the latest ‘small screen phone’ that I know.

iPhone 13 mini (left) and SE 3rd generation, photo by TUCKER BOWE

To test my website, I have used Google Chrome’s device toolbar, a feature included in the developer tools. Conveniently, the iPhone SE (not the 1st gen) is the first device on the list. (Checked on Microsoft Edge and Naver Whale)

iPhone SE is the 1st device in the Google Chrome device toolbar

However, iPhone SE’s 375px wide viewport is not the slimmest. Samsung Galaxy still uses a 360px wide viewport in its latest device, the Galaxy S22. In fact, S6, S7, S8, S9, S10, S20, and S21 all have the same viewport width of 360px according to the Mobile FIRST website.

Galaxy S22’s viewport size. Tested on BrowserStack Live with What is my viewport.

Note that I have removed all Plus variants from the above list. Mobile FIRST website states that S8+, S9+, S21+, and S22+(archive) have a 360px wide viewport. However, I have checked that the S22+ has a 384px wide viewport.

Galaxy S22 and S22 Plus have different viewport widths

YesViz also states that Galaxy S9 and S9+

I have decided to set a minimum viewport width to 360px and show an error message if it is slimmer than that. Note that the Samsung Galaxy Fold (the 1st generation) cover(external) display has an even slimmer viewport width of 280px according to the Chromium developer tools and this article.

Selecting the ‘Samsung Galaxy S8’ shows a viewport size of 360 × 740