摘要：话不多说，上正题，本文主要是加深对个视口的了解，以及相关的属性作用于哪些视口上，希望对大家有帮助吧概括总结布局视口最有用，用到的几乎都是这个。
标题想了半天，最后潦草的取了【深入理解*】，可能有些童鞋们看完觉得没有深入理解，那。。。
话不多说，上正题，本文主要是加深对viewport3个视口的了解，以及相关的属性作用于哪些视口上，希望对大家有帮助吧
概括总结：布局视口最有用，用到的几乎都是这个。理想视口是浏览器定义的最佳的布局视口的尺寸，缩放的最大最小情况是基于这个计算的。视觉视口受缩放影响，一般情况不大用。
大概了解viewport童鞋们应该知道，viewport有3种
布局视口（layout viewport）
视觉视口（visual viewport）
理想视口（ideal viewport）
对应相关的属性有5个
width：设置布局视口的宽度为特定的值
initial-scale：设置页面的初始缩放程度和布局视口的宽度。
minimum-scale：设置最小缩放程度(范围0.1 - 10)
maximum-scale：设置最大缩放程度(范围0.1 - 10)
user-scalable：是否阻止用户进行缩放
为啥没有理想窗口：因为理想窗口是浏览器自己定义的，不同浏览器设备的理想窗口不一致是很正常的。
布局视口移动设备的通常的宽度在240到640像素之间，但是很多桌面的网站的宽度都在800像素以上。一个35%的sidbar在桌面看起来很正常，在手机上则会非常的窄。为了解决这个问题。很多移动端浏览器的厂商都将视口的宽度设计的比屏幕尺寸宽很多，从768到1024不等，但常见的宽度是980px。
可以用document.documentElement.clientWidth/clientHeight取得对应的值
下图是在没有加viewport meta的时候，对应移动端的宽度(iphone 8p上也是980)
在浏览器碰到一个没有做移动端优化的网站时候，浏览器会尽可能缩小网站让用户看到网站的全貌。
viewport meta里面的width是用来设置layout viewport的，除了常见的device-width，还能设置成固定数值，比如600。
CSS布局会根据布局视口计算，并被它约束。
如下图，粉色条的宽度是根据600 * 30% = 180
initial-scale也是用来设置layout viewport的，它和minimum-scale和 maximum-scale不一样。
布局视口宽度 = 理想视口宽度 / initial-scale， 所以下图中布局视口的宽度等于106
视觉视口视觉视口是指用户正在看到的网站的区域。用户可以通过缩放来操作视觉视口，同时不会影响布局窗口
一般情况下，视觉视口对开发人员并不重要，但是如果实在要用，可以用window.innerWidth/Height可以获取当前视觉适口的值（安卓webkit2和代理浏览器会有问题）
在讲布局视口的时候，提到过布局视口的默认宽度一般是980左右，以适应桌面网页的宽度，但这在移动端并不是一个理想的宽度，所以浏览器厂商都引入了理想视口的概念。
理想视口对设备来说是最理想的布局视口尺寸，拥有最理想的浏览和阅读的宽度。
理想视口是浏览器定义的，不是设备或操作系统的工作。所以同一个设备上的不同浏览器可能具有不同的理想适口宽度。
理想视口宽度会随着设备改变转向 (早期的safari例外，可以用initial-scale=1解决，我刚刚用iphone 8p试了，旋转设备后理想适口自动换了）
可以用screen.width/height 返回理想视口的尺寸。（兼容性不好。。。）
以下两种方式都能将布局窗口的宽度设置成理想窗口的宽度，但是第一种方式在早期safari的设备旋转后不会变化，第二个在IE 10下宽度不正确，所以第三种才是完美的mata视口
所有的缩放都是基于理想视口宽度的 maximum-scale和minimum-scale都是根据理想视口定的，和布局视口的宽度并无关系。
下图中，理想视口宽度是320px，布局视口设置成160px，截图是我放大到最大的时候（10倍），对应视觉窗口的宽度是32px(2个粉红的宽度)，即 理想视口宽度/10倍的宽度，而不是布局视口/10的宽度（16px）
参考：
书本《移动web手册》
链接：https://www.quirksmode.org/mo...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/58436.html
摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...
摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...
摘要：通过上述的例子我们知道基本上的默认宽度是，且浏览器会将者大小的文档塞进有限的设备宽度内浏览器会动态计算文档的布局及内容，所以我们看到的东西都很小。故缩小引发的原理一样。以上只为个人多日查阅实践及总结，仅作参考多谢 viewport浅入 相信所有的 web 开发者都见过亦或用过这个神奇的 meta 标签头，亦或在不明白或者半明半蒙的情况下就用上了。 先来解个疑惑 ，上图 showImg(...
摘要：分享嘉宾简介新时代布局的分享者是新加坡的国际知名专家陈慧晶。陈慧晶老师的分享主题介绍如下布局经常是令前端开发者头痛的一块工作。布局系统在这一小节中，慧晶老师主要分享了跟这新时代布局的三大栋梁。的首个公开工作草案是在发布的，而的则是发布。 作者：陈大鱼头 github： KRISACHAN 记录原因：2019年3月30日在深圳举行了第五届的CSS Conf，鱼头作为一枚CSS新手以及爱好者也...
摘要：分享嘉宾简介新时代布局的分享者是新加坡的国际知名专家陈慧晶。陈慧晶老师的分享主题介绍如下布局经常是令前端开发者头痛的一块工作。布局系统在这一小节中，慧晶老师主要分享了跟这新时代布局的三大栋梁。的首个公开工作草案是在发布的，而的则是发布。 作者：陈大鱼头 github： KRISACHAN 记录原因：2019年3月30日在深圳举行了第五届的CSS Conf，鱼头作为一枚CSS新手以及爱好者也...
阅读 696·2023-04-25 23:59
阅读 3360·2021-10-08 10:04
阅读 1569·2019-08-30 14:05
阅读 890·2019-08-30 13:58
阅读 367·2019-08-29 18:41
阅读 994·2019-08-29 17:15
阅读 2234·2019-08-29 14:13
阅读 2643·2019-08-29 13:27
