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.
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)
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.
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.
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.