前端中的viewport

原创 笑靥 随笔 分享类 163阅读 2018-06-26 16:13:30 举报

ppk对于移动设备上的viewport有着很多的研究(两个viewport的故事-pc篇两个viewport的故事-移动篇Meta viewport)。这次关于viewport的总结也是基于ppk的相关观点。

PC端

  1. pc端的几个尺寸
    screen Size: screen.width/height 显示器的尺寸,单位是设备像素,不会改变
    window size: window.innerWidth/innerHeight 浏览器窗口的尺寸,是元素显示的可用空间。单位是css像素,这个大小会随着用户对浏览器的缩放行为而相应的增减。(呈反向,就是说用户放大页面,可用空间越小)
    scrolling offset: window.pageXOffset/pageYOffset document横向纵向的滚动偏移。
    document width 页面内容的总宽度,浏览器并没有提供这个值
    viewport size: document.documentElement.clientWidth/clientHeight,这个并不是html的尺寸
    html size:document.documentElement.offsetWidth/offsetHeight
  2. viewport
    viewport的作用是限制<html>元素,是网站最顶级的块级元素。viewport实际上等于浏览器窗口,拥有浏览器窗口的宽度和高度,<html>元素宽度为viewport宽度的100%。(如果没有手动设置html的宽度)
  3. 关于浏览器的缩放

    用户对页面的缩放是通过拉伸像素实现的。在两个viewport的故事-pc篇是这么描述的:
    假设你给一个元素设置了width: 128px的属性,并且你的显示器是1024px宽,当你最大化你的浏览器屏幕,这个元素将会在你的显示器上重复显示8次。
    如果用户进行缩放,那么计算方式将会发生变化。如果用户放大到200%,那么你的那个拥有width: 128px属性的元素在1024px宽的显示器上只会重复显示4次。元素的宽度并没有从128被修改为256像素,元素仍然是128个CSS像素宽,即使它占据了256个设备像素的空间。

移动端

根据两个viewport的故事-移动篇Meta viewport中的解释,移动端有三个viewport: visual viewport、layout viewport、ideal viewport。

  1. 尺寸
    layout viewport: document.documentElement.clientWidth ;css布局是以layout viewport 作为参考计算的,所以<html>元素在初始情况下使用的是layout viewport的宽度
    visual viewport: window.innerWidth/innerHeight; visual viewport是页面在当前屏幕上显示的部分,会随着用户的缩放行为,尺寸受到影响而改变,而layout viewport则不会改变。
    ideal viewport: 移动设备上网页的理想大小,由设备本身决定
    screen size、scrolling size、html size与pc端一致。
  2. meta viewport

    meta viewport用来设置layout viewport的宽度

    width = device-width

    通过设置width= device-width 将layout viewport的宽度等于ideal viewport的宽度。
    特殊的在iphone和ipad上,无论是横屏还是竖屏,宽度都是竖屏是ideal viewport的值

    initial-scale

    visual viewport width = ideal viewport width / zoom factor (缩放因子)通过给页面初始缩放因子设置指定值,根据ideal viewport的宽度,计算出visual viewport的宽度;设置layout viewport的宽等于刚刚计算出来的visual viewport的宽。
    如果intial-scale= 1,计算出visual viewport的宽等于ideal viewport的宽。进而可以将layout viewport的宽度设置为ideal viewport的宽度
    特殊的: 对于IE,会获取一个错误的ideal viewport,并且会将任意值都当作成1,所以在IE上initial-scale取什么值都无所谓;IE10上横屏模式和竖屏模式的宽都是竖屏时ideal viewport宽度。

    initial-scale=1与width=device-width

    由于单独使用上面两个方式设置,都或多或少存在一些问题,因此一般同时使用以上两个规则,将layout viewport的值设置为ideal viewport的大小
    所有的缩放规则都是相对于 ideal viewport而言的,而与layout viewport大小无关。

    width 和 initial-scale=1

    当width 和 initial-scale=1冲突时,使用宽度最大原则(横屏或竖屏模式下均是)来解决,即哪个宽度大用哪个。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复