移动端 viewport 概念介绍_viewport设置页面移动设备以何种形式渲染-优快云博客

本文介绍了移动浏览器中visualviewport和layoutviewport的概念，解释了它们如何帮助网页在移动设备上更好地呈现，以及如何通过<meta>标签调整layoutviewport。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

移动浏览器

移动设备比桌面设备屏幕小很多，如果把桌面浏览器viewport的概念照搬过来会出现什么后果？

假设流动布局的网站，一般给侧栏设置width:30%，那么假设移动浏览器宽高是320*480，那么这个侧栏实际拥有的宽度只有不到100px，放几个字都不够，这会让你的网站显得很糟糕，一大票在桌面浏览器结构良好的网页在移动浏览器上都会惨不忍睹。

移动浏览器的设计者就希望移动设备上网页的显示能尽可能地接近桌面浏览器，于是有了这么两个概念：visual viewport和layout viewport。

visual viewport就是浏览器当前显示的部分页面，可以通过拖动改变页面显示的部分，通过放大缩小改变visual viewport的大小。

layout viewport就是提供给CSS计算的viewport，相当于桌面浏览器的viewport，不同的是layout viewport跟当前浏览器可视范围无关系，浏览器怎么缩放都与它无关，它是一个给定的值。

不同设备给layout viewport定了不同的默认值，宽度上大概是：Safari 980px，Opera 850px，Android Webkit 800px，IE 974px，高度根据设备屏幕的宽高比计算。（实际上viewport的高度几乎没用，可以忽略之）

这样提供给css计算的viewport宽高就与桌面浏览器相近了，页面计算渲染出来的效果跟桌面浏览器几乎一致。页面放大缩小不会影响到layout viewport，也就是不会影响到页面渲染。

在移动浏览器上，所有页面打开时默认visual viewport = layout viewport，也就是最小缩放，例如用mobile safari打开一个页面，无论页面内容如何，都会显示980px宽度的内容。

修改layout viewport

可以通过在<head>上写<meta>标签改变浏览器的layout viewport，如果专门针对移动浏览器设计页面，那最常用的就是设置layout viewport宽度为设备宽度，或者设置initial-scale，并设置不可缩放，这样移动浏览器就始终以1:1的方式渲染显示页面，无需理会缩放，可以像桌面浏览器那样进行精确的开发。