理解 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">本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
