【前端】移动端Web开发学习笔记【1】

时间 2019-11-10

标签前端移动 web 开发学习笔记栏目无线繁體版

原文原文链接

Part 1:

两篇重要的博客

有两篇翻译过来的博客值得一看：css

两个viewport的故事（第一部分）
两个viewport的故事（第二部分）html

这两篇博客探讨了一些基本概念。浏览器

Part 2: PC端的一些基本概念

screen.width/height

意义：用户屏幕的总体大小。
度量单位：设备像素。
浏览器错误：IE8以CSS像素对其进行度量，IE7和IE8模式下都有这个问题。

它们是显示器的属性，而不是浏览器的。框架

window.pageX/YOffset

意义：页面滚动的距离。
度量单位：CSS像素。
浏览器错误：无。

window.pageXOffset和window.pageYOffset，包含了文档水平和垂直方向的滚动距离。因此你能够知道用户已经滚动了多少距离。ide

window.innerWidth/Height

意义：浏览器窗口的总体大小，包括滚动条。
度量单位：CSS像素。
浏览器错误：IE7不支持。Opera以设备像素进行度量。

window.innerWidth/Height是以CSS像素进行度量的。当用户放大的时候这个数值会减小。因此若是用户进行放大操做，那么在窗口中你能获取的空间将会变少，window.innerWidth/Height的值也变小了。布局

document.documentElement.clientWidth/Height

意义：Viewport尺寸。
度量单位：CSS像素。
浏览器错误：无。

viewport的尺寸能够经过document.documentElement.clientWidth和-Height获得。学习

document.documentElement实际上指的是元素：即任何HTML文档的根元素。能够说，viewport要比它更高一层；它是包含元素的元素。
在这种状况下document.documentElement.clientWidth和-Height给出的仍然是viewport的尺寸，而不是元素的。（这是一个特殊的规则，只对这个元素的这个属性对产生做用。在任何其余的状况下，使用的是元素的实际宽度。）
因此document.documentElement.clientWidth和-Height一直表明的是viewport的尺寸，无论元素的尺寸是多少。测试

document.documentElement.clientWidth与window.innerWidth的区别

可是难道viewport宽度的尺寸也能够经过window.innerWidth/Height来提供吗？怎么说呢，模棱两可。.net

两个属性对之间存在着正式区别：document.documentElement.clientWidth和-Height并不包含滚动条，可是window.innerWidth/Height包含。这像是鸡蛋里挑骨头。翻译

事实上两个属性对的存在是浏览器战争的产物。当时Netscape只支持window.innerWidth/Height，IE只支持document.documentElement.clientWidth和Height。从那时起全部其余浏览器开始支持clientWidth/Height，可是IE没有支持window.innerWidth/Height。

pageX/Y, clientX/Y, screenX/Y 的区别

浏览器错误：IE不支持pageX/Y。IE和Opera以CSS像素为单位计算screenX/Y。

当一个鼠标事件发生时，有很多于五种属性对能够给你提供关于事件位置的信息。对于咱们当前的讨论来讲它们当中的三种是重要的：

pageX/Y提供了相对于元素的以CSS像素度量的坐标。

clientX/Y提供了相对于viewport的以CSS像素度量的坐标。

screenX/Y提供了相对于屏幕的以设备像素进行度量的坐标。

90%的时间你将会使用pageX/Y；一般状况下你想知道的是相对于文档的事件坐标。其余的10%时间你将会使用clientX/Y。你永远不须要知道事件相对于屏幕的坐标。

媒体查询

意义：见正文。
度量单位：见正文。
浏览器错误：IE不支持它们。
若是 device-width/height是以CSS像素进行度量的，那么Firefox将会使用screen.width/height的值。
若是width/height是以设备像素进行度量的，那么Safari和Chrome将会使用documentElement.clientWidth/Height的值。
最后，说说关于媒体查询的事。原理很简单：你能够声明「只在页面宽度大于，等于或者小于一个特定尺寸的时候才会被执行」的特殊的CSS规则。好比：

div.sidebar {
    width: 300px;
}

@media all and (max-width: 400px) {
    // styles assigned when width is smaller than 400px;
    div.sidebar {
        width: 100px;
    }

}

当前sidebar是300px宽，除了当宽度小于400px的时候，在那种状况下sidebar变得100px宽。

问题很显然：咱们这儿度量的是哪一个宽度？

这儿有两个对应的媒体查询：width/height和device-width/device-height。

width/height使用和documentElement .clientWidth/Height（换句话说就是viewport宽高）同样的值。它是工做在CSS像素下的。

device-width/device-height使用和screen.width/height（换句话说就是屏幕的宽高）同样的值。它工做在设备像素下面。

你应该使用哪一个？这还用想？固然是width。Web开发者对设备宽度不感兴趣；这个是浏览器窗口的宽度。

因此在桌面环境下去使用width而去忘记device-width吧。咱们即将看到这个状况在移动端会更加麻烦。

Part 3: 移动端

两个viewport

viewport太窄了，以致于不能正常展现你的CSS布局。明显的解决方案是使viewport变宽一些。不管如何，须要把它分红两部分：visual viewport和layout viewport。

George Cummins在Stack Overflow上对基本概念给出了最佳解释：

把layout viewport想像成为一张不会变动大小或者形状的大图。如今想像你有一个小一些的框架，你经过它来看这张大图。（译者：能够理解为「管中窥豹」）这个小框架的周围被不透明的材料所环绕，这掩盖了你全部的视线，只留这张大图的一部分给你。你经过这个框架所能看到的大图的部分就是visual viewport。当你保持框架（缩小）来看整个图片的时候，你能够不用管大图，或者你能够靠近一些（放大）只看局部。你也能够改变框架的方向，可是大图（layout viewport）的大小和形状永远不会变。

也看一下Chris给出的解释:

visual viewport是页面当前显示在屏幕上的部分。用户能够经过滚动来改变他所看到的页面的部分，或者经过缩放来改变visual viewport的大小。

document.documentElement.clientWidth/Height

意义：Layout viewport的尺寸
度量单位：CSS像素

window.innerWidth/Height

意义：Visual viewport的尺寸。
度量单位：CSS像素。

screen.width and screen.height

意义：屏幕尺寸
度量单位：设备像素

像桌面环境同样，screen.width/height提供了以设备像素为单位的屏幕尺寸。像在桌面环境上同样，作为一个开发者你永远不须要这个信息。你对屏幕的物理尺寸不感兴趣，而是对屏幕上当前有多少CSS像素感兴趣。

window.pageX/YOffset

意义：滚动距离；与visual viewport相对于layout viewport的距离同样。
度量单位：CSS像素

你还需知道的是visual viewport当前相对于layout viewport的位置。这是滚动距离，而且就像在桌面同样，它被存储在window.pageX/YOffset之中。

document.documentElement.offsetWidth/Height

意义：<html>元素的总体尺寸。
度量单位：CSS像素。

就像在桌面上同样，document.documentElement.offsetWidth/Height提供了以CSS像素为单位的元素的整个尺寸。

媒体查询 Media Query

意义：度量元素的宽度（CSS像素）或者设备宽度（设备像素）。

媒体查询和其在桌面环境上的工做方式同样。width/height使用layout　viewport作为参照物，而且以CSS像素进行度量，device-width/height使用设备屏幕，而且以设备像素（？？不是很理解）进行度量。

换句话说，width/height是document.documentElement.clientWidth/Height值的镜像，同时device-width/height是screen.width/height值的镜像。（它们在全部浏览器中实际上就是这么作的，即便这个镜像的值不正确。）

事件坐标

这里的事件坐标与其在桌面环境上的工做方式差很少。不幸的是，在十二个测试过的浏览器中只有Symbian WebKit和Iris这两个浏览器能获取到三个彻底正确的值。其余全部浏览器都或多或少有些严重的问题。

pageX/Y仍然是相对于页面，以CSS像素为单位，而且它是目前为止三个属性对中最有用的，就像它在桌面环境上的那样。
clientX/Y是相对于visual viewport来计算(注意：这里居然不是client viewport)，以CSS像素为单位的。这有道理的，即便我还不能彻底指出这么作的好处。
screenX/Y是相对于屏幕来计算，以设备像素为单位。固然，这和clientX/Y用的参照系是同样的，而且设备像素在这没有用处。因此咱们不须要担忧screenX/Y；跟在桌面环境上同样没有用处。