美文网首页移动端
HTML:手机的物理分辨率和逻辑分辨率

HTML:手机的物理分辨率和逻辑分辨率

作者: 白祤星 | 来源:发表于2018-12-16 18:31 被阅读0次

常识:


  • 无论安卓手机还是苹果手机都存在两种分别率
  • 物理分辨率:即 标准分辨率,是指 显示屏显示图像的 原始分辨率,也叫 真实分辨率
  • 逻辑分辨率:即 压缩分辨率显示屏分辨率
  • 决定图像清晰程度 的是 物理分辨率决定显示屏的适用范围 的是 逻辑分辨率
  • 两者间由 Scale Factor(缩放因子) 计算得到
  • 通常 物理分辨率 > 逻辑分辨率,而 物理分辨率 = 逻辑分辨率 * 缩放因子
  • 但在使用 台式电脑 和 笔记本 的情况下 物理分辨率 = 逻辑分辨率

代码实例:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>显示手机分辨率</title>
    <script>
      var width = window.screen.width;
      var height = window.screen.height;
      var dpr = window.devicePixelRatio;
      document.write("物理分辨率-宽度:" + width * dpr + "<br/>");
      document.write("物理分辨率-高度:" + height * dpr + "<br/><br/>");
      document.write("逻辑分辨率-宽度:" + width + "<br/>");
      document.write("逻辑分辨率-高度:" + height);
    </script>
  </head>
  <body></body>
</html>

相关文章

网友评论

    本文标题:HTML:手机的物理分辨率和逻辑分辨率

    本文链接:https://www.haomeiwen.com/subject/bguxkqtx.html