3

I am trying to develop a simple CMS-agnostic, HTML-PHP-JavaScript-CSS mobile-first contact form.

I want to give my <form> tag a minimal satandard width (not min-width but width which is by standard minimal) in the CSS file.

I don't know what should be the minimal width to cover all viewports of all "smartphone"s out there and that shouldn't really change anytime in the next 50 years (in any plausibility).

What is the smallest standard pixel viewport for smartphones?
Is there a standard about viewports per se anywhere? One could help create better user experience

0

1 Answer 1

2

The What is the smallest screen size you design for question on UX is still correct. The narrowest phones still have a width of 320px. Phone browsers tend to let the browser take up the entire width of the screen with no window decoration or border, so the viewport width is the same as the device width.

I recently pulled screen size data out of Google Analytics for my site that gets millions of visitors a month and posted it at How do you determine a good set of breakpoints for srcset image sizes. 3.82% of my users use a device that is only 320px wide and almost no visitors use a device that is smaller.

Here are the top 30 device widths from that data in a table. Any other width represents less than 0.1% of users.

Width (px) % Users
320 3.82%
360 26.49%
375 13.41%
377 0.08%
384 0.20%
390 0.11%
393 3.35%
400 0.07%
412 11.24%
414 14.84%
424 0.88%
600 0.11%
601 0.11%
768 0.84%
800 0.29%
810 0.13%
834 0.20%
1024 1.09%
1093 0.08%
1280 2.84%
1360 0.28%
1366 5.09%
1440 1.40%
1536 2.49%
1600 1.09%
1680 0.46%
1920 6.15%
2048 0.10%
2560 0.38%
7
  • wow, thanks ! You said something I wonder about a lot almost no visitors use a device that is smaller. ; do you have a number or a percentage about it, at least in a broad assessment spanning on one year or more?
    – timesharer
    Mar 20, 2021 at 9:47
  • I am still not sure if I should take an "insurance gap" of 16px and arbitrarily set width to 304px, or just somewhere in the range of 256px-320px.
    – timesharer
    Mar 20, 2021 at 9:49
  • It is really only a handful that are smaller and most of those look bogus. Like reports of screen widths of 0px or 20px. Designing for 320px is the industry standard. Everybody has been doing it for years. If anybody wanted to create a phone that had a narrower viewport it wouldn't work with most websites. So no manufacturer is going to try to do that. Mar 20, 2021 at 9:55
  • wow, very interesting and rare data. Thank you very much,
    – timesharer
    Mar 20, 2021 at 10:09
  • Please kindly consider to detail about it in an appendix in the answer via update in case the comments get deleted, I strongly think it's rare data.
    – timesharer
    Mar 20, 2021 at 10:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.