DPR 不适用于 Firefox/chrome 检查器

Question

我的最后一个问题由于某些原因被关闭 (Chrome Inspector not even 1% accurate to real mobile devices)

但是，问题似乎与 DPR 有关。我会附上图片来显示我的问题

用于 Iphone 6/7/8 的带有 DPR 2.0 的 Chrome/Firefox 检查器：

真正的 iPhone 6：

我无法在我的电脑或我朋友的电脑上的任何浏览器上的任何网站上模拟 DPR。它总是像 1 一样缩放。我使用 DPR 1,2 还是 3 都没关系。

所以我的问题是如何成功模拟 DPR 2.0？

我猜问题是 DPR 还是其他问题？

Answer 1

首先，较大的文本是我的错，我的 iphone 的文本集更大，这就是文本不同的原因。但是这个主题的核心仍然是相同的，并且分辨率与chrome检查器和真实设备不同。不过主要是因为浏览器任务栏。

似乎没有与浏览器相关的检查器解决方案有效。然而，即使有些人说不可能模拟真实设备，它实际上也是可能的，而且谷歌本身也可以使用 android studio：

• https://developer.android.com/studio

您可以使用任何安卓版本并创建您想要的任何分辨率。您还可以在模拟智能手机浏览器中使用主机操作系统测试 localhost，而不是使用默认的 localhost/127.0.0.1：

• 10.0.2.2

您还可以从主操作系统打开模拟设备的检查器！通过使用：

• chrome://inspect/#devices

这是真正的问题。为什么此检查器窗口会从模拟设备克隆正确的设备分辨率？我的意思是它实际上又是默认的 chrome 检查器窗口。非常混乱。

他们甚至克隆了菜单栏，即使它现在正在显示，与 android studio 模拟器相比，分辨率和其他所有内容都是 1to1 克隆的。

但我猜它比实际克隆更实时流式传输。

这是不可能的..

---

也许很高兴知道您可以使用全屏 API 来避免那些烦人的浏览器任务栏问题，这些问题会使您的 ui 崩溃并占用空间。您可以使用此代码通过用户手势进入全屏：

<button id="goFS">Go fullscreen</button>
<script>
 $("#goFS").on("click",function(){
      
   // this works with scroll -  do not use document.body.requestFullscreen();   
   const elem = document.documentElement;
   if (elem.requestFullscreen) {elem.requestFullscreen()}

      if(document.fullscreenElement){
      console.log('fullscreen detected');
      }

  
 });
</script>

---

事实上，作为网页设计师，你必须下载安卓开发者软件来模拟真实的显示解决方案，这真的很遗憾。我希望谷歌将来会在他们的 chrome 检查器中构建这项技术。

另外，我猜苹果正在为他们的 ios 应用程序开发提供相同的软件。所以你也应该能够模仿他们的iphone。但是据我所知，您必须为此使用 MAC 机器。

希望这对任何人都有帮助。