'Device pixel ratio' in dev tools no longer seems to work

[ewel...@gmail.com]

Hello,

I've been redirected from Chrome help, to Chromium help, and finally to here.

Sometime in the last month my ability to manipulate the device pixel ratio in Chromes dev tools broke. Entering numbers into the field seems to change nothing now. I do mobile web development, so this is a problem for me. Changing the emulated resolution, and turning all of the tick boxes on and off still works. It's only the device pixel ratio that is seemingly inactive. This is making it very difficult to do development for mobile, and I haven't been able to find a fix. I've tried to use the setting on other PCs and had similar results, leading me to think that either Google broke the feature recently or they've changed how I'm meant to interact with it in a way that I don't understand.

Any help would be appreciated!

[dgo...@chromium.org]

Hello,

What exactly doesn't work for you? What is the expected behavior?

Do you have media queries which check for device pixel ratio and they don't trigger? Or do you use window.devicePixelRatio value?

Note that changing device pixel ratio should not have any visible effect unless you have specific media queries or use window.devicePixelRatio somewhere (most common is canvas).

Could you please provide an exact page to reproduce the problem wit detailed description of what's wrong?

Thanks,

Dmitry

[ewel...@gmail.com]

In the past, and consistently for the last year across every site I have ever used it on, setting a device pixel ratio of 2 had the effect of pixel doubling the screen. That is, a 640x1136 resolution would display and act as a 320x568 resolution. With media queries this meant that I could semi-accurately code for mobile by mimicking the kinds of resolution densities and screen sizes phones have. That was the expected behavior, simulated pixel doubling. I was unaware that it would only work in concert with window.devicePixelRatio. I've used it on quite a few live websites that I didn't develop, and this behavior is universal, even across sites it used to work on, so I doubt that's the culprit.

What it is doing right now is nothing. If I set an emulated 640x1136 resolution with a device pixel ratio of two all chrome does is set my viewport to 640x1136. It's as if device pixel ratio isn't there at all. It has seemingly no discernible effect on any website. I can't produce a page specific to this issue, because this issue is universal to every page I have tried it on.

[Dmitry Gozman]

We have switched from showing DIP pixels (the physical pixels of device screen) to CSS pixels (the number of pixels a web page can see) in the DevTools user interface. That's probably what is confusing right now.

When you change device pixel ratio right now, media queries which use {min,max}-device-pixel-ratio should start/stop matching, while everything related to device-{width,height} does not change. That's exactly like it was before.

What is your workflow which doesn't work anymore? Everything possible before switch to CSS pixels should still be possible.

- Dmitry

[ewel...@gmail.com]

Thank you for the reply! It's good to at least know something did change.

I work predominantly within bootstrap 3, and currently emulating for media queries doesn't work unless I do the pixel math in my head. Setting an 1136x640 (iphone 5) resolution pixel doubled with a device pixel ratio simply adjusts my viewport to 1136x640. Previously it adjusted the viewport to 568x320 (it was simulating the pixel ratio), at which point all of my media queries would snap to functionality. That was, to me, a logical result of the setting. Are you saying that I need to set my emulated resolution to 568x320 (the iphones rendered resolution) now, rather than simulating the actual resolution of the device?

[Dmitry Gozman]

On Fri, Jul 25, 2014 at 7:09 PM, <ewel...@gmail.com> wrote:

Thank you for the reply! It's good to at least know something did change.

I work predominantly within bootstrap 3, and currently emulating for media queries doesn't work unless I do the pixel math in my head. Setting an 1136x640 (iphone 5) resolution pixel doubled with a device pixel ratio simply adjusts my viewport to 1136x640. Previously it adjusted the viewport to 568x320 (it was simulating the pixel ratio), at which point all of my media queries would snap to functionality. That was, to me, a logical result of the setting. Are you saying that I need to set my emulated resolution to 568x320 (the iphones rendered resolution) now, rather than simulating the actual resolution of the device?

Yes, if you would like to do that manually. However, you can just choose a device preset, which will does that for you. In the newest version (Google Chrome Canary), you can even make your own device presets.

- Dmitry

[ewel...@gmail.com]

Thank you, I'm glad to have gotten to the bottom of this.

[PhistucK]

This is not exactly emulating the situation on the device.

For example, high DPI screens have window.outerWidth or window.innerWidth or screen.width (one of them, I think, but I forget which, sorry) set to the real width (so 320x480 iPhone 4 would set it to 640, or something like that).

These values matter and can change how the code works.

☆PhistucK

--
You received this message because you are subscribed to the Google Groups "Google Chrome Developer Tools" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-develo...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/CAJfDkaFjmG9x5xhUNLnMt%3DXGwK%3DBNFvghh61yDyMHYuoH2y1Dg%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

[Dmitry Gozman]

On Sat, Jul 26, 2014 at 1:29 AM, PhistucK <phis...@gmail.com> wrote:

This is not exactly emulating the situation on the device.

For example, high DPI screens have window.outerWidth or window.innerWidth or screen.width (one of them, I think, but I forget which, sorry) set to the real width (so 320x480 iPhone 4 would set it to 640, or something like that).

These values matter and can change how the code works.

What are you talking about? Do you have specific data on what doesn't work? When I navigate to jsbin.com/urowoh on my Nexus 4, I get window.outerWidth=384px, window.innerWidth=384px and screen.width=384px.

Please file a bug report if you think something is broken there.

-Dmitry

 

--
You received this message because you are subscribed to a topic in the Google Groups "Google Chrome Developer Tools" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-chrome-developer-tools/D_T4BxQGxA4/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-chrome-develo...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/CABc02_LEEKfxmnMQ0pxe%3Dz%2Bb1FS9eDXZeNqEkyczF6kpNT4owQ%40mail.gmail.com.

[PhistucK]

The Android browser on Samsung Galaxy S IV shows screen.width = 1080px.

I think iOS does the same for window.outerWidth, I can check tomorrow if you want.

(Chrome on the same device indeed shows 360px)

☆PhistucK

To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/CAJfDkaHd-cV0iy9qXQTS6EJ4T5dmWWWVgfsXsG_13vt09aj7zg%40mail.gmail.com.

[Dmitry Gozman]

On Sat, Jul 26, 2014 at 3:19 PM, PhistucK <phis...@gmail.com> wrote:

The Android browser on Samsung Galaxy S IV shows screen.width = 1080px.

I think iOS does the same for window.outerWidth, I can check tomorrow if you want.

(Chrome on the same device indeed shows 360px)

We follow Chrome here. If it's not obvious for the user, we should just mention that in the documentation.

Unfortunately, we can't emulate all the browsers on all the devices.

 

To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/CABc02_KGMEzoG-RCWfg5ugSirfZdu_DzmzSAffTbMu%3DHe2kBZg%40mail.gmail.com.

[PhistucK]

While I agree you cannot emulate everything, this seems like a relatively minor change that can severely affect the rendering in the actual devices.

☆PhistucK

To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/CAJfDkaEzSnN3MfianXqOS4RqSA4HJFnrBpezMun7pruU3wmyCg%40mail.gmail.com.