理解 Viewport

关于响应式布局

为了能使我们的网页适应不同设备的屏幕尺寸，通常我们会在CSS使用 media queries 来改变不同规格下的页面样式，对于有的元素，只需要增加 width:100% 就足够使其具有响应式布局的能力。

我们会定义多套 CSS 样式，例如：

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width : 320px)
and (max-width : 480px) {/* Styles */}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {/* Styles */}
 /* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {/* Styles */}
 /* iPads (portrait and landscape) ----------- */@media only screen
and (min-width : 768px)
and (max-width : 1024px) {/* Styles */}
/* iPads (landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : landscape) {/* Styles */}
/* iPads (portrait) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait) {/* Styles */}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {/* Styles */}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {/* Styles */}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {/* Styles */}

定义 Viewport

Meta 标签的 viewport 属性告诉浏览器用什么样的尺寸来渲染视窗。

例如：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

用设备的宽度来定义视窗，其初始和最大缩放比例都设置为 100%

不同的设备视窗的规格也不相同，很多手机浏览器设置980px为其显示宽度。它使得网页被渲染成980像素宽，并按这个比例填充整个浏览器。

对于小的显示屏，网站内容会比视窗还大。

改变Viewport的值可以让你定义设备的渲染尺寸。

Viewport的宽度

设置 viewport 的宽度，就像告诉浏览器这就是网页的最佳显示宽度，如果你希望网页在iphone4上得到最佳效果，你可以这样设置：

<meta name="viewport" content="width=320">

但是这样有悖于响应式布局的原则，当你将网页放在其他设备上显示时，你的网页只能看到320像素宽的内容，最好的解决办法是使用设备的宽度

<meta name="viewport" content="width=device-width">

Viewport 的比例

移动设备上，你可以使用一些手势来缩放页面，但是如果你将视窗的宽度与设备相匹配，你将不需要再缩小图像以保证其能全部显示，这里用到了 initial-scale 属性

<meta name="viewport" content="initial-scale=1">

如果你想禁用放大功能，可以增加如下设置

<meta name="viewport" content="maximum-scale=1">

Understanding The Viewport

转载于:https://my.oschina.net/tonglei0429/blog/479678