关于viewport

发表于 | 更新于 | | 阅读次数 |

viewport-w3school

viewport是用户在网页的可见区域，不同设备的viewport不同，移动设备比桌面屏幕的viewport小。

起初网页只针对桌面屏幕设计开发，出现移动设备之后，网页在移动端太大以致无法git移动屏幕。因此，移动端浏览器缩小了整个web page的比例。

开发者使用<meta>标签控制viewport元素，它告诉移动端浏览器如何控制页面的dimension和scaling：

  • width=device-width让页面width等于设备屏幕宽度。
  • initial-scale=1.0设置页面初始加载时的缩放比例。

以下两图是有无<meta>时的页面展示情况：

没有meta
有meta

尽量不要让页面水平滚动，用户只需要垂直方向的滚动：

  • image的宽度如果比viewport的宽度更宽，会导致页面可水平滚动；
  • 不要让页面内容依赖某一具体的viewport宽度来render，也就是要适配不同的viewport；
  • 使用media query来为不同大小的页面应用不同的样式。

a tale of two viewports - desktop pages

device pixels、CSS pixcels

前者不同设备不相同，一般可由screen.width/height获取；

设备1024px，元素128px：

  • the element would fit on your monitor 8 times roughly；
  • 如果用户将页面zoom两倍，your element with width: 128px will fit only 4 times on his 1024px wide monitor.
  • zooming就是拉伸像素。上述第二步zoom两倍后，element并没有从128px变为256px，而实际像素double in size了：CSS像素为128px的元素占领了实际device的256px. 也就是说，zoom两倍使得一个CSS pixel变为一个device pixel的4倍 - 2倍width和2倍height.

开发者只关心CSS pixel，用户关心device pixel：用户zoom似的页面最适合他阅读，浏览器会自动确保用户zoom后的CSS layout拉伸或缩放。

假设zoom 100%

在这种情况下，1 CSS pixel = 1 device pixel

screen size

screen.width/height

  • 用户屏幕的宽高
  • device pixels
  • 是monitor的而不是browser的特性
  • 对开发者没用。

window size

window.innerWidth/innerHeight

  • 用户有多少浏览器窗口可用空间给你的CSS layout
  • 会随用户zoom而变化
  • CSS pixels
  • 包含滚动条

scrolling offset

window.pageX/YOffset

  • CSS pixels
  • 整个document滚动了多少像素

viewport

  • viewport就是浏览器的窗口（注意，这里只对桌面端而言）
  • viewport的宽度是<html>元素的宽度
  • container层级：viewport(browser window) -> <html> -> <body>

document width

  • 整个文档的宽度
  • 随zoom而变化

获取viewport宽高和<html>的宽高

  • document.documentElement.clientWidth/Height是<html>元素的父元素的宽高，而不是<html>元素的宽高；如果<html>元素设置了宽度（虽然不推荐这样做），就能看到二者明显的差别。
  • document.documentElement.offsetWidth/Height是<html>元素的宽高。如果设置了<html>的宽度，这对属性会有所体现。
  • document.documentElement.clientWidth/Height不包括滚动条，而window.innerWidth/innerHeight包括滚动条。

事件发生的位置坐标

  • event.pageX/Y: 相对于<html>, CSS pixels，使用得最多
  • event.clientX/Y: 相对于viewport, CSS pixels
  • event.screenX/Y: 相对于screen, device pixels，对开发者没什么用

media query

media query width: 使用documentElement .clientWidth/Height，即viewport的宽高

media query device-width: 使用screen.width/height

a tale of two viewports - mobile pages

problem of mobile

screen size太小

两种viewport: layout viewport & visual viewport

layout viewport大小不会改变，其内部较小的frame是visual viewport。

layout viewport比visual viewport宽

zoom会改变visual viewport：因为zoom导致更多或更少的CSS pixedl进入了screen

<html>标签起初是继承layout viewport的宽度

二者都是CSS pixels

layout viewport的宽高：document.documentElement.clientWidth/Height

visual viewport的宽高：document.innerWidth/Height

screen.width/height给出了screen的宽高，开发者几乎不需要这对属性

当前的visual viewport相对于layout viewport的位置：window.pageX/YOffset

<html>的全部大小：document.documentElement.offsetWidth/Height

事件发生的位置坐标

  • event.pageX/Y: 相对于<html>, CSS pixels，使用得最多
  • event.clientX/Y: 相对于viewport, CSS pixels
  • event.screenX/Y: 相对于screen,也即viewport, device pixels，对开发者没什么用
分享
0%