码迷,mamicode.com
首页 > 其他好文 > 详细

你可能不知道的viewport

时间:2018-06-09 18:56:21      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:偏移量   比例   别人   ini   doc   缩小   手机   log   也有   

概述

前几天偶然看到一个pc端网页,发现用手机打开竟然同比缩放了,作为一个前端从业者,我自然想要弄清它到底是怎么缩放的。之后查了它的meta信息,css和js,发现没有任何兼容手机端的代码,那它到底是怎么缩放的呢?百思不得其解,最后无意中看别人说viewport的默认值是980px,才知道原来是viewport的锅。

于是我深入的复习了一下viewport相关知识,把心得记录下来,供以后开发时参考,相信对其他人也有用。

基础概念

本来看了移动前端开发之viewport的深入理解,但是仍然有一些概念不理解,于是去看了PPK大神对于viewport的研究(第一篇第二篇第三篇),算是理清了。

首先从css像素和实际像素说起,css像素就是我们写的css的像素,如果没有进行任何缩放的话,css像素就和实际像素是一样的,如果用浏览器对页面进行了缩放,那么css像素不变,实际像素会根据缩放比例变化

值得一提的是,缩放是个很重要的概念,在pc端的网页一般没有进行缩放,所以1px的css像素常常等于1px的实际像素。

  1. 取viewport宽高,用document.documentElement.clientWidth和document.documentElement.Height。
  2. 取设备宽高,用screen.width和screen.height。
  3. 取窗口可视区域宽高,用window.innerWidth和window.innerHeight。
  4. 取可视区域偏移量,用window.pageXOffset和window.pageYOffset。

viewport宽高

viewport宽高是用document.documentElement.clientWidth和document.documentElement.Height来取到的。细心观察可以发现,document.documentElement就是html元素,而document.documentElement.clientWidth就是html的宽度。

我们知道,css里面的包含块的宽度会自动延伸至父元素的宽度,所以最外层包含块的宽度会延伸到body的宽度,而body的宽度会延伸到html的宽度,那html的宽度延伸到什么宽度呢?答案是viewport的宽度!所以可以用html的宽度来度量viewport的宽度。

另外,这里有一个小坑,就是html的宽度是可以修改的,但是即使修改了html的宽度,document.documentElement.clientWidth和document.documentElement.Height的值仍然是viewport的宽高,这是html元素的这2个属性的不同之处。

那当我们改了html的宽度之后,怎么获得html的宽高呢?方式是利用document.documentElement.offsetWidth和document.documentElement.offsetHeight.

移动端viewport

明白了上面viewport的宽高机制之后就很好理解移动端的viewport了。

移动端由于设备的像素很小,所以如果不进行缩放的话,就只能看到pc端网页的部分内容,所以移动端浏览器在兼容的时候,会对页面进行缩放,但是为了避免在缩放的时候页面发生重排和重绘,浏览器就有2个viewport,一个是我们常说的viewport,它用来放置页面,它的默认值宽度是980px;另一个是可视区域的visual viewport,它是移动端的可视区域,用来放大或缩小。

在pc端,我们常说的viewport就等于可视区域的visual viewport,所以css像素和实际像素比是1比1。

在移动端,由于放置页面的viewport的宽度默认为980px,但是设备的宽度常常小于980px,所以可视区域的viewport会对它进行缩放,直到页面内容的宽度正好达到屏幕的宽度。所以我们用手机端看到的pc端页面都是已经缩放过的(如果页面没有设置viewport的话)。

注意,有些情况下,可视区域的viewport的宽度不会等于放置页面的viewport的宽度。比如有一个页面,我们设置它的最外层包含块的最小宽度为1250px,那么放置页面的viewport的宽度仍是默认值980px,但是可视区域的viewport的宽度会达到1250px。

那怎么得到可视区域的缩放比例呢?它等于设备的宽度除以可视区域的宽度,即:screen.width/window.innerWidth。(注意不是viewport的宽度)

其他宽度信息也可以按照上面列出的方法来取。

修改viewport

如果是专门为移动端做的页面,那么常常要设置viewport,使它的两个viewport都等于设备宽度。代码如下:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

viewport的其它设置方法可以参考:移动前端开发之viewport的深入理解

你可能不知道的viewport

标签:偏移量   比例   别人   ini   doc   缩小   手机   log   也有   

原文地址:https://www.cnblogs.com/yangzhou33/p/9160310.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!