问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

平板中使用Chrome/Edge 显示的分辨率为实际的一半。怎么解决？

头像
wgf4242
    146339105

    分辨率是2000*1200 实际显示为 1000*600

    好多大小就有问题了。

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <div id="app"></div>

  <script>
    let app = document.querySelector('#app')
    var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    var screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

    app.textContent = `${screenWidth}, ${screenHeight}`
  </script>

</body>

</html>

<style>
  * {
    margin: 0;
    padding: 0;
  }

  #app {
    width: 100%;
    height: 100vh;
  }

</style>
    htmlhtml5
    阅读 1.5k
    3 个回答
    得票最新
    头像
    toesbieya
      2.2k84674

      一个是物理像素，一个是逻辑像素吧，这有啥问题

      头像
      陟上晴明
        22k145391
        1. 逻辑像素和物理像素的问题；
        2. 系统缩放问题（设置 - 系统 - 显示 - 缩放与布局 - 更改文本、应用等项目大小）

        使用 devicePixelRatio 这个API检查一下像素比。

        头像
        王清盛
          19228

          修改了 <meta name="viewport"> 标签的内容，增加了 maximum-scale=1.0 和 user-scalable=no，以防止浏览器自动缩放页面。
          添加了 JavaScript 代码部分，用于获取设备的像素比(devicePixelRatio)，然后计算实际的屏幕宽度和高度。
          将计算得出的实际宽度和高度赋值给 CSS 自定义变量 --actual-width 和 --actual-height。

          <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>Document</title>
  <style>
    :root {
      --actual-width: 100%;
      --actual-height: 100vh;
    }
    * {
      margin: 0;
      padding: 0;
    }

    #app {
      width: var(--actual-width);
      height: var(--actual-height);
      /* 其他适配高分屏的样式 */
    }
  </style>
</head>

<body>

  <div id="app"></div>

  <script>
    let app = document.querySelector('#app');
    let devicePixelRatio = window.devicePixelRatio || 1;
    
    var screenWidth = Math.round(window.innerWidth * devicePixelRatio);
    var screenHeight = Math.round(window.innerHeight * devicePixelRatio);

    document.documentElement.style.setProperty('--actual-width', `${screenWidth}px`);
    document.documentElement.style.setProperty('--actual-height', `${screenHeight}px`);

    app.textContent = `${screenWidth}, ${screenHeight}`;
  </script>

</body>

</html>
          查看全部 3 个回答
          推荐问题