[移动端]视口与媒体查询
Posted 程序员云锦
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[移动端]视口与媒体查询相关的知识,希望对你有一定的参考价值。
视口
viewport 解释为中文就是‘视口’的意思,也就是浏览器中用于显示网页的区域。在 PC 端,其大小也就是浏览器可视区域的大小,所以我们也不会太关注此概念;而在移动端,绝大多数情况下 viewport 都大于浏览器可视区,保证 PC 页面在移动浏览器上面的可视性。为提升可视性体验,针对移动端有了对 viewport 的深入研究。
在移动端有三种类型的viewport:layoutviewport、visualviewport、idealviewport。具体解释如下
布局视口
layoutviewport 布局视口: 大于实际屏幕, 元素的宽度继承于 layoutviewport,用于保证网站的外观特性与桌面浏览器一样。layoutviewport 到底多宽,每个浏览器不同。iPhone 的 safari 为 980px,通过 document.documentElement.clientWidth 获取。
布局视口是指网页的宽度,一般移动端浏览器都默认设置了布局视口的宽度。
我们可以通过调用document.documentElement.clientWidth
/ clientHeight
来获取布局视口大小。
视觉视口
visualviewport 视觉视口: 当前显示在屏幕上的页面,即浏览器可视区域的宽度。
视觉视口是指用户正在看到的网站的区域,这个区域的宽度等同于移动设备的浏览器窗口的宽度
当用户对浏览器进行缩放时,不会改变布局视口的大小,所以页面布局是不变的,但是缩放会改变视觉视口的大小。
例:用户将浏览器窗口放大了200%,这时浏览器窗口中的CSS像素会随着视觉视口的放大而放大,这时一个CSS像素会跨越更多的物理像素。
所以,布局视口会限制你的CSS布局而视觉视口决定用户具体能看到什么。
我们可以通过调用window.innerWidth
/ innerHeight
来获取视觉视口大小。
理想视口
idealviewport 理想视口: 为浏览器定义的可完美适配移动端的理想 viewport,固定不变,可以认为是设备视口宽度。比如 iphone 7 为 375px, iphone 7p 为 414px。
布局视口在移动端展示的效果并不是一个理想的效果,所以理想视口(ideal viewport)就诞生了:网站页面在移动端展示的理想大小。
上面在介绍CSS像素时曾经提到页面的缩放系数 = CSS像素 / 设备独立像素
,实际上说页面的缩放系数 = 理想视口宽度 / 视觉视口宽度
更为准确。
所以,当页面缩放比例为100%时,CSS像素 = 设备独立像素
,理想视口 = 视觉视口
。
我们可以通过调用screen.width / height
来获取理想视口大小。
为了实现理想视口,需要给移动端页面添加标签配置视口,通知浏览器来进行处理。
视口适配 Meta viewport
<meta>元素表示那些不能由其它html元相关元素之一表示的任何元数据信息,它可以告诉浏览器如何解析页面。
我们可以使用<meta>元素的viewport来帮助我们设置视口、缩放等,从而让移动端得到更好的展示效果。
viewport的适配
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;">
viewport属性解析
Value | 可能值 | 描述 |
---|---|---|
width | 正整数或device-width | 以pixels(像素)为单位, 定义布局视口的宽度。 |
height | 正整数或device-height | 以pixels(像素)为单位, 定义布局视口的高度。 |
initial-scale | 0.0-10.0 | 定义页面初始缩放比率。 |
minimum-scale | 0.0-10.0 | 定义缩放的最小值;必须小于或等于maximum-scale的值。 |
maximum-scale | 0.0-10.0 | 定义缩放的最大值;必须大于或等于minimum-scale的值。 |
user-scalable | 一个布尔值(yes或者no) | 如果设置为 no,用户将不能放大或缩小网页。默认值为 yes。 |
注意
device-width就等于理想视口的宽度,所以设置width=device-width就相当于让布局视口等于理想视口。
由于initial-scale = 理想视口宽度 / 视觉视口宽度,所以我们设置initial-scale=1;就相当于让视觉视口等于理想视口。
这时,1个CSS像素就等于1个设备独立像素,而且我们也是基于理想视口来进行布局的,所以呈现出来的页面布局在各种设备上都能大致相似。
获取窗口大小API
API | 作用 |
---|---|
window.innerHeight | 获取浏览器视觉视口高度(包括垂直滚动条) |
window.outerHeight | 获取浏览器窗口外部的高度。表示整个浏览器窗口的高度,包括侧边栏、窗口镶边和调正窗口大小的边框 |
window.screen.Height | 获取获屏幕取理想视口高度,这个数值是固定的,`设备的分辨率/设备像素比 |
window.screen.availHeight | 浏览器窗口可用的高度 |
document.documentElement.clientHeight | 获取浏览器布局视口高度,包括内边距,但不包括垂直滚动条、边框和外边距 |
document.documentElement.offsetHeight | 包括内边距、滚动条、边框和外边距 |
document.documentElement.scrollHeight | 在不使用滚动条的情况下适合视口中的所有内容所需的最小宽度。测量方式与clientHeight相同:它包含元素的内边距,但不包括边框,外边距或垂直滚动条 |
媒体查询 @media
使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。
@media mediatype and|not|only (media feature)
CSS-Code;
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
媒体类型
值 | 描述 |
---|---|
all | 用于所有设备 |
用于打印机和打印预览 | |
screen | 用于电脑屏幕 |
speech | 应用于屏幕阅读器等发声设备 |
可以给不同的媒体设定不同的值
媒体功能
值 | 描述 |
---|---|
aspect-ratio | 定义输出设备中的页面可见区域宽度与高度的比率 |
color | 定义输出设备每一组彩色原件的个数。如果不是彩色设备,则值等于0 |
color-index | 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表,则值等于0 |
device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的比率 |
device-height | 定义输出设备的屏幕可见高度 |
device-width | 定义输出设备的屏幕可见宽度 |
grid | 用来查询输出设备是否使用栅格或点阵 |
height | 定义输出设备中的页面可见区域高度 |
max-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最大比率 |
max-color | 定义输出设备每一组彩色原件的最大个数 |
max-color-index | 定义在输出设备的彩色查询表中的最大条目数 |
max-device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最大比率 |
max-device-height | 定义输出设备的屏幕可见的最大高度 |
max-device-width | 定义输出设备的屏幕最大可见宽度 |
max-height | 定义输出设备中的页面最大可见区域高度 |
max-monochrome | 定义在一个单色框架缓冲区中每像素包含的最大单色原件个数 |
max-resolution | 定义设备的最大分辨率 |
max-width | 定义输出设备中的页面最大可见区域宽度 |
min-aspect-ratio | 定义输出设备中的页面可见区域宽度与高度的最小比率 |
min-color | 定义输出设备每一组彩色原件的最小个数 |
min-color-index | 定义在输出设备的彩色查询表中的最小条目数 |
min-device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最小比率 |
min-device-width | 定义输出设备的屏幕最小可见宽度 |
min-device-height | 定义输出设备的屏幕的最小可见高度 |
min-height | 定义输出设备中的页面最小可见区域高度 |
min-monochrome | 定义在一个单色框架缓冲区中每像素包含的最小单色原件个数 |
min-resolution | 定义设备的最小分辨率 |
min-width | 定义输出设备中的页面最小可见区域宽度 |
monochrome | 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备,则值等于0 |
orientation | 定义输出设备中的页面可见区域高度是否大于或等于宽度 |
resolution | 定义设备的分辨率。如:96dpi, 300dpi, 118dpcm |
scan | 定义电视类设备的扫描工序 |
width | 定义输出设备中的页面可见区域宽度 |
以上是关于[移动端]视口与媒体查询的主要内容,如果未能解决你的问题,请参考以下文章