首页 > 代码库 > 移动端宽度的一些知识

移动端宽度的一些知识

  在做移动端的时候,经常接触到devicePixelRatio这个单词,这个单词的定义就是:

    window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。

  公式就是:

    window.devicePixelRatio = 物理像素 / dips;

  小结论:

    当页面设置了<meta name="viewport" content="width=device-width">时候,document.documentElement.clientWidth在大部分浏览器下,得到的是布局视区的宽度,等同于dips的宽度。

    ①在ios设备中,window.screen.width返回的是dips宽,因此,在竖着显示的时候,视网膜显示屏的ipad和非视网膜显示屏的ipad返回的都是768.

      screen.width乘以devicePixelRatio得到的是物理像素值。

    ②在安卓设备中,window.screen.width返回的是物理像素宽度。

      screen.width除以devicePixelRatio得到的是设备独立像素(dips)值。

    ③devicePixelRatio在大多数浏览器是值得信赖的。

 

移动端宽度的一些知识