移动端学习

最新推荐文章于 2022-07-21 21:37:01 发布

hellokingqwe

最新推荐文章于 2022-07-21 21:37:01 发布

阅读量337

点赞数

本文链接：https://blog.csdn.net/hellokingqwe/article/details/53674791

版权

以下是三个技术博客链接，未来复习时重点再看，本文是一次学习笔记。

参考1 http://www.cnblogs.com/2050/p/3877280.html

参考2 http://www.quirksmode.org/mobile/viewports.html

参考3 http://www.quirksmode.org/mobile/viewports2.html

这篇文章是有关尺寸的，各种width，pixel的一次深入探索。

竟然发现自己以前理解的知识，不仅是浅的，而且还是不对的。

移动端前端开发，小显示器带来了很多东西：

先来点基础知识：

1 font-size 通常指大写的“M”的宽度。

设置了Font-size 之后，它会被用来计算em 和 ex; 1ex ≈ 0.5em ;

2 css pixel 和 device pixel

仔细看这篇文章 http://www.cnblogs.com/xiaohuochai/p/5494624.html

再结合参考2 ，最后就会知道搞清楚这两个概念的重要性。

我的小结：

（1）device pixel 是显示器的物理属性，基本上用不到，对应属性screen.width属性，measured in device pixels because

they never change: they’re a feature of the monitor, and not of the browser.

（2）css pixel 是逻辑概念，怎么理解呢？比如说，在一个页面中有一个div 元素，这个div 元素的高宽在css中规定： width : 100px;

这时候，CTRL + 滑轮缩放页面，这个div 元素的宽度还是 100px 。

注意：参考http://ued.ourfuture.cn/fed/4200.html

手机的分辨率与逻辑分辨率。

设备独立/无关像素（dip/dp：device-independent pixel）：计算机坐标系统中的一个点，该点代表一个可由程序使用并控制的虚拟像素，然后由相关系统转换为物理像素。

不论是PC端还是移动端，通过screen.width获取的值是设备独立像素，而非设备的屏幕分辨率

3 viewport

3.1 pc 端

The viewport has the width and height of the browser window. The viewport is not an HTML construct, so you cannotinfluence it by CSS.

Viewport 是 measured in CSS pixels?应该是的

So document.documentElement.clientWidth and -Height always gives the viewport dimensions, regardless of the dimensions ofthe <html> element.

3.2 移动端

大小都是相对于 css pixel

the viewport is too narrow

移动端的layout viewport是以css pixel 计算的，并且不论zoom in/out ，旋转手机，都不会改变这个值。document.documentElement.clientWidth

但是对于visual viewport说，也是以css pixel 计算的，zoom in/out ，旋转手机，改变了页面的显示内容的宽度比例，因此会改变。 window.innerWidth 可以看到有多少CSS像素显示在手机上。

每个手机的逻辑宽度：

手机的设备像素宽度，dpr是不一样的，那么他们的CSS 宽度是多少：

6s:

5s:

Just as on desktop, document.documentElement.offsetWidth/Height gives the total size of the <html> element in CSS pixels.那么有个小问题，这是layout viewport吗？document.documentElement.clientWidth and -Height contain the layout viewport’s dimensions.

很明显html的长度是整个页面的长度必须的长，而layout viewport 怎么说都是一个viewport ,只是一个窗口。

4 pc端 window.innerWidth （measured in CSS pixels）

总结来说，window.innerWidth的改变有两种方式，一是改变浏览器窗口大小；二是缩放浏览器窗口；

3)各种宽度

pc端：

图转自 http://stackoverflow.com/questions/3437786/get-the-size-of-the-screen-current-web-page-and-browser-window

但是上面的图并不能说明全部，真正理解，还得搞明白一些原理：

首先得知道viewport的意义：

document width(in CSS pixels)

document.documentElement是<html> element，是所有HTML元素的根元素

viewport is one level higher, so to speak; it’s the element thatcontains the <html> element.

hellokingqwe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端学习

以下是三个技术博客链接，未来复习时重点再看，本文是一次学习笔记。http://www.cnblogs.com/2050/p/3877280.htmlhttp://www.quirksmode.org/mobile/viewports.htmlhttp://www.quirksmode.org/mobile/viewports2.html这篇文章是有关尺寸的，各
复制链接

扫一扫