Question

我想将新的Google手机添加到Chrome开发工具中的“模拟设备”中。

有人知道Pixel 3和Pixel 3 XL的正确自定义设备设置吗？

Answer 1

您必须在Google开发人员中心输入视口大小，而不是屏幕分辨率。因此，像素3和像素3 xl的视口如下。

像素3： 412 x 824 宽高比：16：9〜设备像素比：1.7
像素3 xl： 412 x 847 长宽比：16：9〜设备像素比：1.7

Answer 2

您可以使用类似的方法来了解您的设备详细信息：

   <!DOCTYPE html>
<html>
<body>

<button onclick="OutputDeviceInfo()">Click me</button>

<p id="width"></p>
<p id="height"></p>
<p id="ratio"></p>

<script>

    function OutputDeviceInfo() {
      let deviceWidth = window.screen.width;
      let deviceHeight = window.screen.height;
      let devicePixelAspectRation = window.devicePixelRatio;

    document.getElementById("width").innerHTML = deviceWidth;
    document.getElementById("height").innerHTML = deviceHeight;
    document.getElementById("ratio").innerHTML = devicePixelAspectRation;

      console.log('Width: ' + deviceWidth);
      console.log('Height: ' + deviceHeight);
      console.log('Pixel  Ratio: ' + devicePixelAspectRation);
    }
</script>

</body>
</html>

Answer 3

在Chrome浏览器上按F12 >>单击切换设备工具栏（在左侧小移动图标上）>>单击下拉选项，您可以在其中看到设备的spme列表，可以看到最后一个选项“编辑“-单击该编辑选项>>单击“添加自定义设备”按钮，输入目标设备的详细信息

将Pixel 3和Pixel 3 XL添加到自定义设备设置中

3 个答案: