Understanding viewport: examples

Basics

• no viewport defined
• <meta name="viewport" content="width=320">
• <meta name="viewport" content="width=480">
• <meta name="viewport" content="width=640">
• <meta name="viewport" content="width=device-width">
• <meta name="viewport" content="initial-scale=1">
• <meta name="viewport" content="initial-scale=2">
• <meta name="viewport" content="initial-scale=0.5">
• <meta name="viewport" content="height=device-height">
• <meta name="viewport" content="width=device-width, maximum-scale=2">
• <meta name="viewport" content="width=device-width, minimum-scale=0.5">
• <meta name="viewport" content="width=device-width, userscalable=no">
• <meta name="viewport" content="width=device-width, initial-scale=1">
• <meta name="viewport" content="width=device-width"> + <div style="width: 600px">
• <meta name="viewport" content="width=device-width, initial-scale=1"> + <div style="width: 600px">

DPI-specific settings

• <meta name="viewport" content="width=device-width"> with hi-res and lo-res images
• <meta name="viewport" content="width=device-width"> with device-pixel-ratio media query (1.5)
• <meta name="viewport" content="width=device-width"> with device-pixel-ratio media query (2)
• <meta name="viewport" content="width=device-width"> with device-pixel-ratio media query (2.25)
• <meta name="viewport" content="width=device-width, target-densitydpi=device-dpi">

@viewport

• @viewport {width: device-width;}
• @viewport {width: device-width;} + media query