<meta name="viewport" content="....">
content value:
initial-scale = 1.0 // Initial zoom
Hypothesis
img --> width 360px
container -> width: 960px -> page width
<meta name="viewport" content="initial-scale=1.0">
Then the device in the vertical direction: 360px
Sideways direction (that is, cell phone to play games posture): 640px
Page width and visible region
It is easy to understand; width of the page is the overall width of your web page, viewing area is the viewport corresponding property
n elements +2 two borders ==> big box is always the page, the second box is always engaged inside element layout
containner width equal to the content, the frame 960
The first case is that you phone the size of the pixel size and page content is consistent no matter what order to show down, accounting for full screen
The second your viewport size is larger than the content of the page I certainly have a border, if page content is too narrow (too good to be left blank on both sides of the center did) border will be greater
The third row shows, the view becomes large to put
The content summary name = viewport: width = page width // But this is a fixed width
content: device-width, initial-scale = 1.0 // scaling
user-scalable // user mouse Zoom
maximum-scale / minimum // minimum and maximum zoom factor
04