视觉视口和布局视口之间的区别？

| iPhone / iPad等移动设备的视觉视口和布局视口之间有什么区别？ 我已经浏览了很多在线资源，但仍不清楚。     
2020-02-25 4 条评论
分享

没有找到相关结果

    已邀请:

    糕泰灌

            视觉视口是当前屏幕上显示的页面的一部分。 布局视口可能比可视视口要宽得多，并且包含在屏幕上出现和不出现的元素。 可以将布局视口想象成一个不会改变大小或形状的大图像。现在，假设您有一个较小的框架，可以通过该框架查看大图像。小框架周围环绕着不透明的材料，遮挡了大图像的一部分，但您看不到全部。您可以通过框看到的大图像部分是可视视口。您可以在按住框架（缩小）的同时退回大图像，以一次查看整个图像，也可以移近（放大）以仅查看一部分。您也可以更改框架的方向，但是大图像（布局视口）的大小和形状不会改变。 有关此问题的详细信息，请参见：http://www.quirksmode.org/mobile/viewports2.html     
    2020-02-25 0 0
    分享

    扑北爱

            可以在这里找到对这两者的很好解释。 综上所述： 视觉视口   视觉视口是当前屏幕上显示的页面的一部分。用户可以滚动以更改其看到的页面部分，或缩放以更改可视视口的大小。 布局视口   但是，CSS布局（尤其是百分比宽度）是相对于布局视口（比可视视口要宽得多）计算的。      因此，该元素最初采用布局视口的宽度，并且CSS被解释为屏幕明显比电话屏幕宽。这样可以确保您的网站布局与在桌面浏览器上一样。      布局视口有多宽？每个浏览器都不同。 Safari iPhone使用980px，Opera 850px，Android WebKit 800px和IE 974px。 简而言之，当屏幕完全缩小时，布局视口通常是视口的宽度。     
    2020-02-25 0 0
    分享

    肉脓措伪

            布局视口 无论方向或缩放级别如何，其测量值始终相同，仅取决于设备/浏览器窗口。 视觉视口 它会有所不同（例如，在放大时）。这是页面上在任何给定位置实际显示的部分。 两种布局的视频示例 布局视口：小地图中的绿色区域。 可视视口：小地图中的红色框。 布局视口与视觉视口（视频） 在移动/平板电脑设备上 在移动设备上，默认情况下会稍微复杂一些，因为为了提供“完整的Web”体验，许多移动设备会返回假的更高的布局视口尺寸。 例如，默认情况下，经典iPhone报告的布局视口宽度为980px。这意味着，如果您在iPhone上创建一个320px的元素，它将仅占屏幕空间的三分之一。 但是，此机制对于使用媒体查询针对窄屏进行了优化的页面效果不佳。 当我们创建响应式网站时，使用viewport meta标签非常有用，它使我们能够控制许多设备的缩放和布局视口（使用实际尺寸，而不是虚假的报告）。 
    <meta name=\"*viewport*\" content=\"*width=device-width*, initial-scale=1, maximum-scale=1\" />
    视口元标记的示例   提示：如果您使用手机或平板电脑浏览此页面，则可以   单击下面的两个链接以查看区别。   没有视口元标记有视口元标记     
    2020-02-25 0 0
    分享
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册

    或代码 OrCode.com 备案号：粤ICP备15020848号-1
    Escape time: 0.039025068283081