移动端适配你了解多少？

yuxi105768
277 阅读3分钟

前言：本文主要为科普移动端基础适配概念，欢迎来喷

  1. 英寸：
    描述屏幕的物理大小，电脑显示器的 15.6,22，
手机显示器的 4.8、 5.7等使用的单位都是英寸。

上面的尺寸都是屏幕对角线的长度：

英寸( inch,缩写为 in)在荷兰语中的本意是大拇指，一英寸就是指甲底部普通人拇指的宽度。

英寸和厘米的换算： 1英寸=2.54厘米
  2. 屏幕分辨率（物理像素）：
    指一块屏幕由多少像素点组成，例如iphonexs max 2688(垂直) X 1242（水平）
  3. 屏幕清晰度（ppi)
    pixel per inch: 每英寸包含的像素数，值越大，屏幕越清晰，显示画面更为细腻
iPhone XSMax 和 iPhone SE的 PPI分别为 458和 326，说明前者的屏幕更清晰。
购买设备时的重要参考数值
  4. 设备独立像素（dip or dp)
    现如今新出的手机分辨率越来越高，比如之前的设备A:分辨率为 375 X 480, 
新出的设备B:分辨率750 X 960，设备A与设备B物理尺寸大小一致（4.8英寸）
正常来讲，css设置一个宽度为100px的盒子，在设备B上展示物理尺寸（视觉效果）相比设备A更小，
为了解决这个问题，苹果推出retina屏幕，在设备B上用400个物理像素渲染个100个css像素，
解决了不同分辨率设备上的显示问题，
这个时候就需要一个标准的单位来告知不同分辨率设备，它们在界面上显示的元素大小是多少，
即设备独立像素
  5. 设备像素比
    物理像素  /  设备独立像素
js: 通过 window.devicePixelRatio来帮助我们获取设备像素比
css：通过媒体查询 @media only screen and (min-device-pixel-ratio:2)
  6. 布局视口
    以百分比来指定一个元素的大小时，它的计算值是由这个元素的包含块计算而来的素，
最顶级元素就是基于布局视口来计算的。所以布局视口是网页布局的基准视口
移动端布局视口被赋予一个默认值，大部分为 980px，这样 PC的网页可以在手机浏览器上呈现，
但是非常小，用户可以手动对网页进行放大。
api: window.documentElement.clientWidth/Height
  7. 视觉视口
    用户通过屏幕看到的真是区域，默认等于当前浏览器的窗口大小
对浏览器进行缩放时，不会改变布局视口的大小，所以页面布局是不变的，
但是缩放会改变视觉视口的大小。
布局视口限制 CSS布局而视觉视口决定用户具体能看到什么。
api: window.innerHeight/Width
  8. 理想视口
    网站页面在移动端展示的理想大小
浏览器调试移动端时页面上给定的像素大小就是理想视口大小，它的单位正是设备独立像素
api: window.screen.width/height
  9. api集合：
    window.innerHeight：获取浏览器视觉视口高度（包括垂直滚动条）。
window.outerHeight：获取浏览器窗口外部的高度。表示整个浏览器窗口的高度，包括侧边栏、窗口镶边和调正窗口大小的边框。
window.screen.Height：获取获屏幕取理想视口高度，这个数值是固定的， 设备的分辨率/设备像素比
window.screen.availHeight：浏览器窗口可用的高度。
document.documentElement.clientHeight：获取浏览器布局视口高度，包括内边距，但不包括垂直滚动条、边框和外边距。
document.documentElement.offsetHeight：包括内边距、滚动条、边框和外边距。
document.documentElement.scrollHeight：在不使用滚动条的情况下适合视口中的所有内容所需的最小宽度。测量方式与 clientHeight相同：它包含元素的内边距，但不包括边框，外边距或垂直滚动条。
avatar
文章
阅读
粉丝