DPR无法在Firefox/Chrome检查器上运行 [英] DPR not working on firefox/chrome inspector

问题描述

我的最后一个问题由于某些原因而被关闭( Chrome Inspector甚至不能达到真实移动设备的1％精度)

My last question was closed for some reasons (Chrome Inspector not even 1% accurate to real mobile devices)

但是，看起来问题与DPR有关.我将附上图片以显示我的问题

However as it seems the problem was related to the DPR. I will attach images to show my problem

适用于Iphone 6/7/8的DPR 2.0的Chrome/Firefox检查器:

Chrome/Firefox Inspector with DPR 2.0 for Iphone 6/7/8:

真正的Iphone 6:

Real Iphone 6:

我无法在我的PC或我的朋友PC上的任何浏览器上的任何网站上模拟DPR.它将始终像1那样缩放.我使用DPR 1,2还是3都没关系.

I can not simulate the DPR on any website on any browser on my pc or my friends pc. It will always scale like 1. Doesnt matter if I use DPR 1,2 or 3.

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

So my questions is how to successfully simulate DPR 2.0?

我想问题是DPR还是其他问题?

I guess the problem is DPR or is it something else?

推荐答案

首先，较大的文本是我的缺点，我的iPhone设置了较大的文本集，这就是文本不同的原因.但是，此主题的核心仍然相同，并且分辨率与chrome inspector和实际设备不同.但是主要是因为浏览器任务栏.

First of all the bigger text was my bad, my iphone got bigger text set that was the reason why the text was different. However the core of this topic is still the same and the resolution is different to chrome inspector and real devices. However mostly because of the browser taskbars.

似乎没有与浏览器相关的检查器解决方案正在工作.但是，即使有人说不可能模拟真实的设备，实际上也是可能的，而且谷歌本身也可以使用android studio:

As it seems no browser related inspector solution is working. However even when some people said it is not possible to emulate real devices it´s actually possible and also by google itself with android studio:

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

您可以使用任何Android版本并创建所需的任何分辨率.您还可以通过使用它代替默认的localhost/127.0.0.1，从模拟的智能手机浏览器中的主机操作系统测试localhost:

You can use any android version and create any resolution you want. You can also test localhost from your host os inside of your emulated smartphone browser by using this instead of the default localhost/127.0.0.1:

• 10.0.2.2

您还可以从主操作系统打开仿真设备的检查器！通过使用:

You can also open inspector of your emulated device from your main os! By using:

• chrome://inspect/#devices

这是一个真正的问题.为什么此检查器窗口从仿真设备克隆正确的设备分辨率?我的意思是，它实际上又是默认的chrome inspector窗口.非常令人困惑.

And here is starting the real question. Why does this inspector window clone the correct device resolution from the emulated device? I mean it´s literally the default chrome inspector window again. Very confusing.

他们甚至克隆菜单栏，即使现在正在显示菜单栏，与android studio模拟器相比，分辨率和其他所有东西都按1to1克隆.

They even clone the menubar, even when it´s now showing, the resolution and everything else was cloned 1to1 compared to the android studio emulator.

但是我想它比实时克隆更实时.

However I guess it´s more realtime streaming than actually cloning.

那到了不可能的地步.

也很高兴知道您可以使用全屏API来避免那些恼人的浏览器任务栏出现问题，这些问题会使您的ui崩溃并占用空间.您可以使用以下代码以用户手势进入全屏显示:

Also maybe very nice to know that you can use the fullscreen API to dodge problems with those annoying browser taskbars which crash your ui and take space. You can use this code to enter fullscreen with user gesture:

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

---

实际上，您不得不下载android开发人员软件来模仿真实的显示解决方案(作为Web设计师)，这确实让我感到很难过.我希望Google将来会在其chrome检查器中内置这项技术.

---

In fact it´s really sad that you have to download android developer software just to emulate real display solutions as web designer. I hope google will build in this technology in future inside of their chrome inspector.

我还猜苹果为他们的ios应用开发提供了相同的软件.因此，您也应该能够模仿iPhone.但是据我所读，您必须为此使用MAC机器.

Also I guess apple is providing the same software for their ios app development. So you should be able to emulate iphones their too. However as far as I read you must use a MAC machine for this.

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

Hope this will help anybody.

这篇关于DPR无法在Firefox/Chrome检查器上运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！