H5移动端开发学习总结

最新推荐文章于 2020-12-25 16:03:58 发布

自由2017

最新推荐文章于 2020-12-25 16:03:58 发布

阅读量1.2w

点赞数 5

CC 4.0 BY-SA版权

分类专栏： HTML5 移动端开发文章标签：移动 HTML5

本文链接：https://blog.youkuaiyun.com/liujie19901217/article/details/51218908

本文详细探讨了移动端开发中关于HTML5的viewport、meta标签、页面最大最小宽度以及line-height属性的问题。作者指出，理解这些概念对于实现高清适配和良好用户体验至关重要，特别是viewport的设置对页面布局和缩放的影响。此外，还提到了retina屏幕的像素处理和设备像素比（dpr）的概念，以及如何通过CSS和JavaScript处理不同设备的适配问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有很长一段时间没有更新博客了，近一段时间开始重新梳理知识点和写博客了，新的博客地址：欢迎访问。

对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点：
1.首先，选取一款手机的屏幕宽高作为基准(现在一般选取iphone6的375×667)。之前项目中也用到过iphone5的320×568。
2.对于retina屏幕(如: dpr=2)，为了达到高清效果，视觉稿的画布大小会是基准的2倍，也就是说像素点个数是原来的4倍（对iphone6而言：原先的375×667，就会变成750×1334）。

viewport（视口）

###3个视口###

layout viewport（布局视口）:CSS初始包含块的尺寸。CSS中所有以百分比为单位的长度都是根据它推算出来的。如果把移动设备上浏览器的可视区域设为viewport的话，某些网站就会因为viewport太窄而显示错乱，所以这些浏览器就决定默认情况下把viewport设为一个较宽的值，比如980px，这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了。ppk把这个浏览器默认的viewport叫做 layout viewport。
可以通过document.documentElement.clientWidth来获取。
visual viewport（视觉视口,即用户实际看见的部分）：屏幕上显示的网页区域的尺寸，会被缩放影响，可以通过window.innerWidth来获取。
ideal viewport（完美视口）:完美适配移动设备的viewport，它的宽度等于移动设备的屏幕宽度。有了完美视口，用户不用缩放和拖动网页就能够很好的进行网页浏览。而完美视口需要通过viewport meta标签来进行相应的设置。

###像素###
一个像素就是计算机屏幕能显示一种特定颜色的最小区域。屏幕上的像素越多，同一时间你可以看到的就越多。
设备物理像素
设备屏幕的物理像素，任何设备的物理像素的数量都是固定的。他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。
CSS像素:px(设备独立像素)
逻辑像素，浏览器使用的抽象单位(之所以叫抽象单位，是因为其可以根据不同的设备和不同的关系来变大变小，所以称为抽象单位)为Web开发者创造的，在CSS和JavaScript中使用的一个抽象的层。px是相对长度单位，相对的是设备物理像素(device pixel)
注意：在旧的屏幕上，当缩放程度为100%时，一个CSS像素等于一个设备像素。但当在高密度屏幕上，例如苹果的视网膜屏幕，一个CSS像素跨越了多个设备像素。如果用户缩小到足够的程度，一个CSS像素会变得明显比一个设备像素小。
举个例子：
当给一个元素设置width:200px时，到底会发生什么事情？
这个width为200px的元素跨越了200个CSS像素。而200个CSS像素相当于多少个