h5移动端|h5移动端概念 iphone|css3|css

移动端概念像素

像素就是计算机屏幕能够显示一种颜色的最小区域。屏幕上的像素越多，就能够看到的越多。
物理像素（设备像素） , 设备的分辨率就是物理像素，单位是 px。
css 像素我们在页面布局时用的 px 就是 css 像素。

物理像素和 css像素
在旧的屏幕上，当缩放程度为 100% 时，一个css响度等于1个物理向度。
屏幕上的像素越多，同一时间看到的就越多。
自动 iphone公司推出的高清屏，在高密度屏幕上，一个 css 像素可以跨越多个设备像素。
设备尺寸相同但像素变得更密集时，屏幕能显示的画面更细致。
像素比
JavaScript 有一个 window.devicePixelRatio , CSS 提供了一个 device-pixel-ratio 的媒体查询。
像素比代表的是设备像素和理想视口的比。
早期的iphone的设备宽度是 320个物理像素，理想视口的宽度也是 320 个像素。像素不就是 1。后来出现高清屏 iPhone 由 640个物理像素，理想视口还是 320，像素比变为 2.

if (window.devicePixelRatio >= 2) { // 像素比大于2 }@media all and (-webkit-min-device-pixel-ratio: 2) { // 像素比大于2 }

一个css像素等于多少个物理像素取决于什么？

取决于屏幕的特性，是否是高清屏幕。
取决于用户的缩放。用户放大，1个css像素就能覆盖更多的设备像素。用户缩小，一个css覆盖的设备像素就会变少。
但是当我们做 PC 端的开发，我们不用担心一个 CSS 像素究竟跨越了多少个设备像素，我们只需要知道 200px 就是 200px，实际上 1个 css 跨跃了多少个物理像素，我们尽管把这些复杂操作交给浏览器计算。

三个视口
包含块：html 元素的被称为初始包含块。它是所有 CSS 百分比宽度推算的根源。

布局视口：桌面的网站设计宽度至少为 800px，而移动端设备宽度 240～640像素。因此把客户端页面放到移动端设备上，百分比设置会被压缩的非常窄。移动厂商为了保证用户能看到全貌（没有做移动端优化）的网站，它会使网站缩小来便于看到全貌。这时，视口与浏览器屏幕就没有关系了。这个视觉会撑大为 980px，一些网站会为 1024px。
【h5移动端|h5移动端概念】视觉视口：视觉视口于设备的屏幕一样宽，用户可以通过缩放来改变视觉视口，不会影响布局视口。
理想视口：因为布局视口会整体缩放网站，这对于用户来说是不理想的，理想视口是为手机准备的，当你添加 meta 视口标签后理想视口会生效。(没有 meta 会以布局视口为例)。width=device-width 告诉浏览器布局视口和理想视口宽度一致。不同设备的理想视口是不一样的。 (理想视口会随便设备转向而改变)

缩放

用户缩放：用户放大，1个css像素就能覆盖更多的设备像素。用户缩小，一个css覆盖的设备像素就会变少。
移动端的缩放不会导致 css 布局被重新计算，手机的处理器工作慢，不会改变布局视口有很大的好处。
最小和最大缩放：手机上是 20% ～ 500% ，合理的使用 meta，将扩大到 10% ～ 1000%。安卓Webkit：不管有没有 meta，缩放为 25%～400%。百分比是根据理想视口来计算的缩放程度。
禁止缩放