The original iPhone's width in portrait orientation was 320px, the viewport was 980px. When a page loaded it was rendered to a viewport 980px wide, like a brows

The original iPhone's width in portrait orientation was 320px, the viewport was 980px. When a page loaded it was rendered to a viewport 980px wide, like a browser window 980px wide. Without setting a viewport setting Safari would render a page as if it was a 980px side browser window. The viewport meta tag let's you adjust this virtual window size. You can set it to whatever value you want but "device-width" will just use the screen's current width according to its current orientation. You can add it to a page's header and in many cases it'll look way better on mobile even without specific CSS targeting mobile. The default viewport size of the original iPhone was in place to let it use the "normal" web. At the iPhone's introduction this was a big deal because other smartphone browsers worked best with simple "mobile" layouts. Safari on the iPhone rendered web pages as they looked on the desktop. Making the viewport sized to the display usually makes it so a user doesn't need to zoom in to read text or horizontally scroll to read wonder content. This behavior makes modern mobile browsers render pages more like old mobile browsers where the viewport was usually the portrait screen width (320px typically).