Why it worked
The video leverages a historical 'trick' used by Apple to make early iPhones appear to have better web browsing capabilities than they did. This is a niche topic that appeals to developers and tech enthusiasts, presented in a concise and visually engaging way with a clear demonstration.
Summary
The video explains how the initial iPhone tricked users by rendering websites at desktop size and then zooming out, making them appear functional despite the small screen. This was achieved by omitting the viewport tag, which would have reported the actual, smaller screen width.
Structure
- 1Explaining the initial iPhone's web browsing limitations
- 2Demonstrating how the viewport tag was used to trick websites
- 3Showing the difference in reported screen width with and without the tag
- 4Revealing the actual iPhone screen width
Product placement
The video demonstrates how to remove and re-add the viewport meta tag in HTML code, showing the resulting screen width output on an iPhone simulator. The creator's link in bio is to 'Doma.software', implying it's related to web development or software.
On-screen text
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
alert(window.innerWidth)
</script>
</body>
</html>
OUTPUT
DEBUG CONSOLE
TERMINAL
PORTS
Dec 22 22:39:11 2023 PHP 8.3.0 Development Server (http://0.0.0.0:8080) started
Dec 22 22:39:15 2023 127.0.0.1:51883 Accepted
Dec 22 22:39:25 2023 127.0.0.1:51883 GET /
How iPhone tricked us all 😁
Carrier 10:55 AM
Apple Bing
Google Yahoo!
Favorites
Privacy Report
In the last count days, Safari has
prevented 0 trackers from profiling
you.
localhost:8080
Carrier 10:55 AM
Everything
MacBook Pro
The new MacBook
featuring Intel Core 2 Duo.
Now up to 25% faster.
Copyright 2006 Apple Computer, Inc. All rights reserved.
Powered by Mac OS X Server.
Carrier 10:39 PM
localhost
375
Close
Carrier 10:39 PM
localhost
375
Close