DPR 不适用于 firefox/chrome 检查器

Question

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

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

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

Real Iphone 6:

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.

So my questions is how to successfully simulate DPR 2.0?

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

Answer 1

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.

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

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

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.

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.

That´s to the point it´s not possible..

---

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>

---

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.

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.