前端viewport（viewport）

2023-12-03 02:39:07 来源：用户：屠竹栋

大家好，我是小跳，我来为大家解答以上问题。前端viewport，viewport很多人还不知道，现在让我们一起来看看吧！

1、在显示面积上手机屏幕相对桌面显示器要小很多，在几年前(现在也如此)大部分网站都是为桌面显示器浏览而设计，很少考虑到适应手机屏幕，所以如果用手机浏览大多网站时会出现问题，比如常见固定宽度的网页会出现横向竖向滑动条，当然这不算什么大问题；但如果是浏览流动布局的网页那情况会非常糟糕，设想一个宽度为30%的侧边栏对于320px手机屏幕而言也就96px，只能容纳8个12px的汉字，可阅读性非常差。

2、为了让手机也能获得良好的网页浏览体验，Apple找到了一个办法：在移动版(iOS)的Safari中定义了viewport meta标签①，它的作用就是创建一个虚拟的窗口(viewport)，而且这个虚拟窗口的分辨率接近于桌面显示器，Apple将其定位为980px②。

3、以一代iphone下的Safari来说就是：在iphone的320px物理屏幕上——视觉窗口(visual viewport)，创建出了一个980px的虚拟窗口——布局窗口(layout viewport)，在视觉窗口(visual viewport)中我们可以拖动横向竖向滑动条或者放大缩小网页，来达到最佳的浏览效果(类似桌面浏览器)；而布局窗口(layout viewport)用来配合CSS渲染布局，例如当我们设置一个容器的宽度为100%时，这个容器的实际值为980px而不是320px。

4、如此一来大部分网页就能以缩放的形式正常的显示在手机屏幕上了。

5、如何设置viewport有了layout viewport似乎解决手机浏览网页的难题，但如果遇到专门为手机优化的网页就又有新的问题：是的，因为iphone的layout viewport默认为980px，导致专为其优化的320px宽的页面只能以缩放的方式显示，这时就需要对viewport进行设置：<head>…<meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=no”/>…</head>这个是最常见的一条viewport meta代码，将viewport定义为：宽度为设备宽度，初始缩放比例为1倍，禁止用户缩放。

6、设置好后我们的页面就显示完美了：viewport全部属性&值如下：width: viewport宽度 height: viewport高度 initial-scale: 初始缩放比例 maximum-scale: 最大缩放比例 minimum-scale: 最小缩放比例 user-scalable: 是否允许用户缩放例：width=960 或 device-width height=1000 或 device-height initial-scale=0.5 maximum-scale=2 minimum-scale=1 user-scalable=1 或 0 (yes 或 no)layout viewport的默认值在Apple实现viewport后，其他浏览器也加入了对viewport meta的支持，但彼此间还是有些差异，差异最大的是layout viewport的表现：Safari iPhone: 980px Opera: 850px Android WebKit: 800px IE: 974px最后关注下width=device-width其实这个属性&值很有意思，字面意应该是viewport宽度等于设备宽度，但在实际中不同的浏览器都给出了个定值：320px；这个值还是源于 Apple，因为早期iphone的分辨率为320px × 480px，大量为iphone量身定制的网站都设置了viewport:width=device-width，并且按照宽度320px来设计制作，所以其他浏览器加入viewport支持时为了兼容性也将device-width定义为了320px。

7、注解① 除此之外不同移动浏览器厂商也有不同的解决方案，例如UCweb就是使用中间件技术。

本文到此讲解完毕了，希望对大家有帮助。

　　免责声明：本文由用户上传，与本网站立场无关。财经信息仅供读者参考，并不构成投资建议。投资者据此操作，风险自担。如有侵权请联系删除！