Fluid layout viewport and

Fluid layout

The percentage distribution, non-fixed width, to both sides of the filling content, the layout of flow.

viewport (viewport)

Web PC side of the display will not appear on the page in the phone side of the browser, because the pages mobile terminal is not directly on the mobile side of the browser, but on a virtual area mobile side, this virtual area called the viewport (visual window, viewport, the viewport width is generally larger than the width of the browser default), then the corresponding zoom viewport, the viewport in the last browser.

Adaptation scheme

Because the default viewport is scaled so pages of user-unfriendly mobile terminal display, so we need to make some configuration pages display was as in mobile and pc-end.

  • Page width must be consistent with the width of the browser
  • The default display scaling and pc-consistency (scale 1.0)
  • Not allow users to zoom the page
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> 
</head>

viewport There are six functional properties

  • width (special values: device-width, showing the device screen width) width is provided
  • height set the height
  • initial-scale (1: means no scaling) set default initialization scaling
  • Whether user-scalable user can zoom settings
  • minmium-scale setting the minimum scaling
  • maxmium-scale Sets the maximum scaling

Guess you like

Origin www.cnblogs.com/jlfw/p/11832756.html