h5移动端概念

最新推荐文章于 2023-07-31 17:47:10 发布

heiheiheiheiheiheii

最新推荐文章于 2023-07-31 17:47:10 发布

阅读量1.7k

点赞数

分类专栏： h5移动端文章标签： css iphone css3

本文链接：https://blog.csdn.net/m0_60703077/article/details/123360249

版权

8 篇文章 0 订阅

订阅专栏

移动端概念

在旧的屏幕上，当缩放程度为 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
}

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

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

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

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

<meta name="viewport" content="user-scaleable=no">

关注

专栏目录