1606089 - responsive design mode viewport has wrong dpi

Status: UNCONFIRMED

(Core :: Layout, defect, P3)

Description

[sailormax]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36

Steps to reproduce:

Trying to use max-width in cm for mobile phones:
@media only all and (max-width: 16cm)

Actual results:

@media only all and (max-width: 16cm)
did not work for Xiaomi Redmi 4x

Expected results:

@media only all and (max-width: 16cm)
has to work for Xiaomi Redmi 4x, because this phone has 70mm width ( https://www.gsmarena.com/xiaomi_redmi_4_(4x)-8608.php )

The problem exists on mobile phones and in responsive design mode

Comment 1

[sailormax]

Attachment: portable.html

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Comment 3

[Patrick Brosset <:pbro>]

The problem exists on mobile phones and in responsive design mode

This tells me that this isn't a devtools bug but a layout bug instead. Moving over to the Layout component for now.

Comment 4

[Emilio Cobos Álvarez [:emilio]]

This is because the text overflows the viewport and there's no <meta name="viewport"> on the page. So I think the width ends up being 980px or such... Hiro?

Comment 5

[Hiroyuki Ikezoe (:hiro)]

Emilio is totally right. And I think Chrome's behavior is the same. Adding <meta name="viewport" content="width=device-width"> makes the media query work as expected, I think.

I am going to close this bug.

sailormax, if you have further concerns, please feel free to reopen this.

Comment 6

[sailormax]

Attachment: portable.html with viewport

Comment 7

[sailormax]

With viewport on mobile phones works better, but in responsive design mode still not working :/
Tested with emulation of Xiaomi Redmi 4x (this phone has 70mm width ( https://www.gsmarena.com/xiaomi_redmi_4_(4x)-8608.php ))

Comment 8

[sailormax]

It has been added as:
720x1280, Device pixel ratio = 3
User agent string = mobile

Did I wrongly setup pixel ratio?
Or we missed DPI setting?

Comment 9

[Hiroyuki Ikezoe (:hiro)]

CCing Brad (it may be a problem only on RDM, I haven't dug into detail though)

Comment 10

[Brad Werth [:bradwerth]]

I'll look at the behavior in RDM.

Comment 11

[Brad Werth [:bradwerth]]

I'm not working in this area anymore. Taking myself off the bug to make it clear that somebody else can pick it up.

Comment 12

[darron clarison]

Experiencing DPI issues in responsive design mode? Double-check viewport settings for Best WP accurate display. Adjusting viewport meta tag might resolve the problem. Stay precise for a seamless responsive design experience!