理解 Viewport

时间:2022-06-26
本文章向大家介绍理解 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