目录
布局视口
视觉视口
理想视口
首页 web前端 js教程 viewport及相关属性之间关系的解析(图)

viewport及相关属性之间关系的解析(图)

Oct 16, 2018 pm 03:13 PM
html5

本篇文章给大家带来的内容是关于viewport及相关属性之间关系的解析(图),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

话不多说,上正题

大概了解viewport童鞋们应该知道,viewport有3种

  1. 布局视口(layout viewport)

  2. 视觉视口(visual viewport)

  3. 理想适口(ideal viewport)

对应相关的属性有5个

  1. width:设置布局视口的宽度为特定的值

  2. initial-scale:设置页面的初始缩放程度和布局视口的宽度。

  3. minimum-scale:设置最小缩放程度

  4. maximum-scale:设置最大缩放程度

  5. user-scalable:是否阻止用户进行缩放

565115758-5bc557856f04a_articlex.jpg

为啥没有理想窗口:因为理想窗口是浏览器自己定义的,不同浏览器设备的理想窗口不一致是很正常的。

2447934478-5bc55823e1c0a_articlex.png

布局视口

移动设备的通常的宽度在240到640像素之间,但是很多桌面的网站的宽度都在800像素以上。一个35%的sidbar在桌面看起来很正常,在手机上则会非常的窄。为了解决这个问题。很多移动端浏览器的厂商都将视口的宽度设计的比屏幕尺寸宽很多,从768到1024不等,但常见的宽度是980px。

下图是在没有加viewport meta的时候,对应移动端的宽度(iphone 8p上也是980)

1830949216-5bc55a59b7c5f_articlex.png

在浏览器碰到一个没有做移动端优化的网站时候,浏览器会尽可能缩小网站让用户看到网站的全貌。

viewport meta里面的width是用来设置layout viewport的,除了常见的device-width,还能设置成固定数值,比如600。

CSS布局会根据布局视口计算,并被它约束。

如下图,粉色条的宽度是根据600 * 30% = 180

1353135515-5bc576ab5fca0_articlex.png

initial-scale也是用来设置layout viewport的,它和minimum-scale和 maximum-scale不一样。

布局视口宽度 = 理想视口宽度 / initial-scale, 所以下图中布局视口的宽度等于106

2990092937-5bc579007433b_articlex.png

视觉视口

视觉视口是指用户正在看到的网站的区域。用户可以通过缩放来操作视觉窗口,同时不会影响布局窗口

一般情况下,视觉窗口对开发人员并不重要,但是如果实在要用,可以用window.innerWidth/Height可以获取当前视觉适口的值(安卓webkit2和代理浏览器会有问题)

3705123341-5bc581e4e203a_articlex.jpg

理想视口

在讲布局窗口的时候,提到过布局窗口的默认宽度一般是980左右,以适应桌面网页的宽度,但这在移动端并不是一个理想的宽度,所以浏览器厂商都引入了理想视口的概念。

理想视口对设备来说是最理想的布局视口尺寸,拥有最理想的浏览和阅读的宽度。

理想视口是浏览器定义的,不是设备或操作系统的工作。所以同一个设备上的不同浏览器可能具有不同的理想适口宽度。

理想视口宽度会随着设备改变转向 (早期的safari例外,可以用initial-scale=1解决,我刚刚用iphone 8p试了,旋转设备后理想适口自动换了)

以下两种方式都能将布局窗口的宽度设置成理想窗口的宽度,但是第一种方式在早期safari的设备旋转后不会变化,第二个在IE 10下宽度不正确,所以第三种才是完美的mata视口

<meta name="viewport" content="width=device-width">

<meta name="viewport" content="initial-scale=1">

<meta name="viewport" content="width=device-width, initial-scale=1">
登录后复制

所有的缩放都是基于理想视口宽度的 maximum-scale和minimum-scale都是根据理想窗口定的,和布局窗口的宽度并无关系。

下图中,理想视口宽度是320px,布局视口设置成160px,截图是我放大到最大的时候,对应视觉窗口的宽度是32px(2个粉红的宽度),即 理想视口宽度/10倍的宽度

3114639364-5bc58b282f6d7_articlex.png

以上是viewport及相关属性之间关系的解析(图)的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

<🎜>:泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系统,解释
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆树的耳语 - 如何解锁抓钩
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1664
14
CakePHP 教程
1423
52
Laravel 教程
1321
25
PHP教程
1269
29
C# 教程
1249
24
HTML 中的表格边框 HTML 中的表格边框 Sep 04, 2024 pm 04:49 PM

HTML 表格边框指南。在这里,我们以 HTML 中的表格边框为例,讨论定义表格边框的多种方法。

HTML 中的嵌套表 HTML 中的嵌套表 Sep 04, 2024 pm 04:49 PM

这是 HTML 中嵌套表的指南。这里我们讨论如何在表中创建表以及相应的示例。

HTML 左边距 HTML 左边距 Sep 04, 2024 pm 04:48 PM

HTML 左边距指南。在这里,我们讨论 HTML margin-left 的简要概述及其示例及其代码实现。

HTML 表格布局 HTML 表格布局 Sep 04, 2024 pm 04:54 PM

HTML 表格布局指南。在这里,我们详细讨论 HTML 表格布局的值以及示例和输出。

HTML 输入占位符 HTML 输入占位符 Sep 04, 2024 pm 04:54 PM

HTML 输入占位符指南。在这里,我们讨论 HTML 输入占位符的示例以及代码和输出。

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表指南。在这里我们还分别讨论了 HTML 有序列表和类型的介绍以及它们的示例

HTML onclick 按钮 HTML onclick 按钮 Sep 04, 2024 pm 04:49 PM

HTML onclick 按钮指南。这里我们分别讨论它们的介绍、工作原理、示例以及各个事件中的onclick事件。

在 HTML 中移动文本 在 HTML 中移动文本 Sep 04, 2024 pm 04:45 PM

HTML 中的文本移动指南。在这里我们讨论一下marquee标签如何使用语法和实现示例。

See all articles