如何解决视觉视口和布局视口之间的区别？
| iPhone / iPad等移动设备的视觉视口和布局视口之间有什么区别？ 我已经浏览了很多在线资源，但仍不清楚。解决方法
视觉视口是当前屏幕上显示的页面的一部分。
布局视口可能比可视视口要宽得多，并且包含在屏幕上出现和不出现的元素。
可以将布局视口想象成一个不会改变大小或形状的大图像。现在，假设您有一个较小的框架，可以通过该框架查看大图像。小框架周围环绕着不透明的材料，遮挡了大图像的一部分，但您看不到全部。您可以通过框看到的大图像部分是可视视口。您可以在按住框架（缩小）的同时退回大图像，以一次查看整个图像，也可以移近（放大）以仅查看一部分。您也可以更改框架的方向，但是大图像（布局视口）的大小和形状不会改变。
有关此问题的详细信息，请参见：http://www.quirksmode.org/mobile/viewports2.html
, 可以在这里找到对这两者的很好解释。
综上所述：
视觉视口
视觉视口是当前屏幕上显示的页面的一部分。用户可以滚动以更改其看到的页面部分，或缩放以更改可视视口的大小。
布局视口
但是，CSS布局（尤其是百分比宽度）是相对于布局视口（比可视视口要宽得多）计算的。
因此，该元素最初采用布局视口的宽度，并且CSS被解释为屏幕明显比电话屏幕宽。这样可以确保您的网站布局与在桌面浏览器上一样。
布局视口有多宽？每个浏览器都不同。 Safari iPhone使用980px，Opera 850px，Android WebKit 800px和IE 974px。
简而言之，当屏幕完全缩小时，布局视口通常是视口的宽度。
, 布局视口
无论方向或缩放级别如何，其测量值始终相同，仅取决于设备/浏览器窗口。
视觉视口
它会有所不同（例如，在放大时）。这是页面上在任何给定位置实际显示的部分。
两种布局的视频示例
布局视口：小地图中的绿色区域。
可视视口：小地图中的红色框。
布局视口与视觉视口（视频）
在移动/平板电脑设备上
在移动设备上，默认情况下会稍微复杂一些，因为为了提供“完整的Web”体验，许多移动设备会返回假的更高的布局视口尺寸。
例如，默认情况下，经典iPhone报告的布局视口宽度为980px。这意味着，如果您在iPhone上创建一个320px的元素，它将仅占屏幕空间的三分之一。
但是，此机制对于使用媒体查询针对窄屏进行了优化的页面效果不佳。
当我们创建响应式网站时，使用viewport meta标签非常有用，它使我们能够控制许多设备的缩放和布局视口（使用实际尺寸，而不是虚假的报告）。
<meta name=\"*viewport*\" content=\"*width=device-width*,initial-scale=1,maximum-scale=1\" />
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。