二、视口布局视口视觉视口理想视口

2视口

视口（viewport）就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口。

2.1 布局视口 layout viewport

一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。

IOS,Android基本都是将这个视口分辨率设置为980px，所以PC上的网页大多都能在手机上呈现，只不过网页上的元素看上去很小，一般默认可以通过手动缩放网页。

2.2 视觉视口 visual viewport

字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。

我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。

2.3 理想视口 ideal viewport

为了使网站在移动端有最理想的浏览和阅读宽度而设定。

理想视口，对设备来讲，是最理想的视口尺寸。

需要手动填写meta视口标签通知浏览器操作。

meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致。简单理解就是设备有多宽，我们布局的视口就多宽。

以后布局都是按照理想视口设定的。

2.5 meta 视口标签

viewport:说明是视口标签。

width=device-width：宽度是设备宽度。

user-scalable=no：用户不能缩放

2.6 标准的viewport设置

视口宽度和设备宽度保持一致。

视口的默认缩放比例1.0

不允许用户自行缩放

最大允许的缩放比例1.0

最小允许的缩放比例1.0

二、视口布局视口视觉视口理想视口相关推荐

【移动端网页布局】移动端网页布局基础概念 ② ( 视口 | 布局视口 | 视觉视口 | 理想视口 )
文章目录一.视口 1.布局视口 ( 网页大小 | 网页大小 > 设备大小 ) 2.视觉视口 ( 设备大小 | 网页大小 > 设备大小 ) 3.理想视口 ( 网页大小 = 设备大小 ) 一 ...
视口viewport的理解（布局视口、视觉视口、理想视口）
在一个浏览器中,看到的区域就是视口(viewport) 在PC端页面中,不需要对视口进行区分,因为布局视口和视觉视口是同一个但在移动端,你布局的视口和可见的视口是不一样的这是因为移动端的网页窗口往 ...
移动端布局三种视口_移动H5的meta视口标签、弹性布局原则和背景图片适配
很多小伙伴对viewport的理解不是很透彻,于是这一篇重点聊聊viewport(视图)的知识点.以帮助大家更加容易理解移动端H5页面的适配方案. 解读移动H5适配最重要的html标签:meta视口标 ...
html逻辑像素和实际像素,物理像素、逻辑像素、设备像素比、PPI、二倍图、css3盒子模型、布局视口、视觉视口、理想视口...
1.1物理像素手机屏幕横向有828个点手机屏幕纵向上有1792个点同等大小屏幕下,点越多.图像显示越精细上面所说屏幕上一个个点就是物理像素(physical pixel) 物理像素也叫设备像素 ...
UE4(Unreal Engine4)虚幻引擎视口布局,并且自定义HDRI
UE4系列文章目录文章目录 UE4系列文章目录前言一.操作步骤 1.准备工作二.操作步骤 1.UE4中创建第三人称游戏前言在UE4中搭建电影级场景.先看下效果一.操作步骤 1.准备工作 ...
cad视口缩放区域怎么使用_cad视口(cad布局和视口使用教程)
在CAD中,视口可以对CAD图形进行多个方向的显示和观察.从而使绘制的图形更加直观.在菜单栏点击"视图"--"视口"--"新建",会弹出一个 ...
【第十六篇】理想视口pc端浏览器移动端浏览器元素单位
VScode关键点类型快捷方式关键字举例理想视口 viewport 理想视口 width=device-width 网页宽度等于设备的宽度 initial-scale=1.0 是否缩小页面 ...
【移动端适配视口viewport】移动端meta属性设置的理想视口是什么
1.看一下我的代码 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
(二)弹性布局Flex
弹性布局Flex 本周在逆战班学习了布局方面的知识,作为前端开发布局是最关键的,此文章用来写自己对弹性布局知识点的理解,和想法, 弹性布局分为两部分父元素和子元素,在父元素上设置弹性布局而控制子元素 ...

二、视口布局视口视觉视口理想视口

二、视口布局视口视觉视口理想视口相关推荐

最新文章

热门文章

二、视口 布局视口 视觉视口 理想视口

二、视口 布局视口 视觉视口 理想视口相关推荐

最新文章

热门文章

二、视口布局视口视觉视口理想视口

二、视口布局视口视觉视口理想视口相关推荐