This was an experiment to see how easy and practical it would be to recreate a physical interactive object in standard web technologies.
In just over an hour I was able to recreate an iPhone 14 Pro, complete with Dynamic Island, and have the content interactive.
The goals I set for myself were:
There's definitely some areas to improve and iterate on, but I'm reasonably happy with how it turned out.
Some concessions were made because they felt more right even though they're techically not.
For example, the iPhone itself is 300px wide, while the actual iPhone 14 Pro screen is 393pts wide. At 100% zoom and using the "Default for display" scaling option in macOS, 300px wide is closer to the physical size. Other dimensions were scaled proportiately based on that initial resizing so they look more or less correct.
Yes, I know that points and pixels are different measurements.
The meta name="viewport" tag in the HTML header magically takes care of it on a website.
A very simplified explanation of the difference is that points refer to normalised pixel values after the display scaling takes place. Pixel values are the same as point values at 1x scaling.
The iPhone 14 Pro is approximately 3x scaling (3pt = 9px on the display).
Some interface details are not implemented in my version, such as the Safari footer changing size as the page is scrolled. It could be done, I just didn't want to.