DPR 不适用于 firefox/chrome 检查器

Question

由于某些原因，我的最后一个问题已关闭（ Chrome Inspector 对真实移动设备的准确率甚至不到 1% ）

然而，问题似乎与 DPR 有关。 我将附上图片以显示我的问题

适用于 Iphone 6/7/8 的带有 DPR 2.0 的 Chrome/Firefox Inspector：

真机 6：

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

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

我想问题是 DPR 还是别的什么？

Answer 1

首先，较大的文本是我的坏处，我的 iphone 有较大的文本集，这就是文本不同的原因。 但是这个话题的核心还是一样的，分辨率和chrome Inspector和真机不一样。 然而主要是因为浏览器任务栏。

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

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

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

• 10.0.2.2

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

• 铬：//检查/#devices

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

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

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

那是不可能的..

---

也可能很高兴知道您可以使用全屏 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 机器。

希望这会帮助任何人。