High resolution phones responsiveness

Hello,

I noticed a problem with Webflow responsiveness. On high-resolution mobiles (1000 x 1602) the website behaves like a desktop version.

For a desktop 1000 is a small resolution. I cannot reach 1000 resolution in tablet or mobile design view, only desktop. Webflow does not recognize the device itself, only the size?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

What phones are those? I’m surprised that their resolution equals their definition in points. For example, an iPhone Xs Max has a screen definition of 1242 × 2688 pixels, but that transfers to a matrix of 414 × 896 points, and that plays well with Webflow:

https://dl.dropboxusercontent.com/s%2Fj49wi0m3xtfpwew%2F19z7o1r.jpg

If a phone OS is registering its full definition as resolution, that’s more an issue with the OS or the browser settings.

Take the Pixel3 XL, it has a screen definition of 1440 Ă— 2960 pixels, yet you design for its screen with a base resolution of 393pt (Webflow shows 393px, could use pt units):

image

I’m not an android user so I don’t know what options are available to deal with screen definition/resolution/density at OS level and browser level.

In hotjar I see both Android and OS phones with this resolution. Basically the version they saw was the desktop one which does not look very appealing on 1000 px.

I don’t know what Hotjar sees and understands.

Can you tell me a device name and a page that is displayed as desktop site on it?

Even if Hotjar, when simulating devices, does this (would be very surprising for a tool that’s around for so long now), it surely doesn’t happen on devices.

This is very unlikely to happen since no phone makes use of its resolution without scaling. I mean that’s what @vincent said already but just to confirm :slight_smile:

1 Like

Thanks @dram! We should mention “except for HDPI images” I guess :—)

1 Like

Hi, was there any resolution (no pun) to this issue as since getting an iPhone 11 pro I’ve noticed a similar issue in landscape mode where it appears to be using the device resolution (2436) rather than the actual viewport width (812) as a breakpoint? I am imagining that this would be happening to all devices that have a retina screen but no way of testing.

*EDIT; my issue is unrelated to the above. breakpoints ARE using the viewport size as should be expected. Now just got to figure out how to work around the iphone notch problem.