Fatal编程技术网

Google chrome devtools 添加像素3&；将像素3 XL转换为自定义设备设置

google-chrome-devtools

Google chrome devtools 添加像素3&；将像素3 XL转换为自定义设备设置,google-chrome-devtools,Google Chrome Devtools,我想将新的谷歌手机添加到Chrome开发工具中的模拟设备中 有人知道Pixel 3和Pixel 3 XL的正确自定义设备设置吗？在Chrome浏览器上按F12>>单击切换设备工具栏（在左侧小移动图标上）>>单击下拉选项，在那里可以看到spme设备列表，可以看到最后一个选项“编辑”-单击编辑选项>>单击“添加自定义设备”按钮输入目标设备的详细信息您可以使用类似以下内容了解设备详细信息： <!DOCTYPE html> <html> <body> <

我想将新的谷歌手机添加到Chrome开发工具中的模拟设备中

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

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

您可以使用类似以下内容了解设备详细信息：

   <!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>


点击我






函数OutputDeviceInfo（）{
设deviceWidth=window.screen.width；
设设备高度=window.screen.height；
设DevicePixelSpectration=window.devicePixelRatio；
document.getElementById（“宽度”）.innerHTML=deviceWidth；
document.getElementById（“高度”）.innerHTML=deviceHeight；
document.getElementById（“比率”）.innerHTML=DevicePixelSpectration；
console.log（'宽度：'+设备宽度）；
console.log（'高度：'+设备高度）；
log（'像素比率：'+设备像素光谱）；
}
您必须在google dev center上输入视口大小，而不是屏幕分辨率。因此，pixel 3和pixel 3 xl的视口如下所示

像素3:412x824纵横比：16:9~设备像素比：1.7
Pixel 3 xl:412 x 847纵横比：16:9~设备像素比：1.7

Er正确。现在，添加缺少的设备的自定义设置是什么。添加缺少的设备的自定义设置是什么？你是什么意思？媒体查询还是我们如何添加到chrome Emulator？有一个很棒的现代设备列表，以及viewport维度、像素比率和用户代理字符串：不确定为什么它与Amirhossein建议不同，但在my pixel 3上加载了Chrome（于2019年11月购买）说明：-像素3:393 x 786纵横比：16:9~设备像素比：2.75，这样Chrome DevTools上的结果与我在设备上看到的结果匹配我使用上述代码创建了一个代码沙盒，只需在设备上打开它：