CSS for hi-res phones

[Sir Osis of Liver]

One of my people has an iPhone 11, screen res is 828x1792 (per this).  It's not displaying background image correctly, and possibly some other elements.  Most, if not all of the responsive themes I've worked with consider anything over 800px width to be a tab, so apparently the phone is trying to render tab css in too small a space.  Is there any way to address this?

 

[Thistle Sifter]

The iPhone 11 has a device pixel ratio of 2, so for CSS purposes it would have a resolution of 414x896. Without seeing anything, my guess would be that something isn't working correctly in code that deals directly with device pixel ratios (eg swapping images for higher res ones, when the number of physical pixels is multiples greater than the number of CSS pixels).

[Aleksi "Lex" Kilpinen]

I am right now, running this in a 828x1792 Responsive Developer Console, and do not see any apparent issue here. What exactly is happening, and what version of SMF, and what theme are we talking about?

And indeed, it would be a 414px × 896px viewport on iPhone 11 unless I am mistaken. And testing that, it seems to work just as I would expect. A Familiar view from my own phone with 1440 x 2960 pixels, 18.5:9 ratio, 360 x 740 viewport.

[Sir Osis of Liver]

We're running a much modified version of old mobile-desktop theme in 2.0.19.  Am unable to replicate the problem in any of the 42 responsive emulations in FF, but from owner's description and screenshot she posted from iPhone 11, background image is being displayed way too large. 

This is what it looks like on her phone -

You cannot view this attachment.

This is how it should look, from FF emulation iPhone 11 Pro Max iOS 14.6  414x896px -

You cannot view this attachment.

I've fixed it somewhat by repositioning the bg image, but it doesn't solve the problem.

You can see it here

[Aleksi "Lex" Kilpinen]

That's odd, sure they arent running in any "desktop" mode? Have they tried emptying cache? This is what I see on my phone, not an iPhone 11, but the screen specs are indeed comparable IMO.

[Sir Osis of Liver]

I'll ask her.  Not sure what it looks like now with updated css, will see if I can get another screenshot.  It's difficult not having access to the phone.

[@rjen]

iPhones are a bit picky about "fixed" background images. I am pretty sure that's what is going on...

[Diego Andrés]

https://caniuse.com/background-attachment

Seems not supported at all.
There are a few 'hacks' to make it work but could have side effects.

[Sir Osis of Liver]

Using this now, she says it looks better -

Code Select Expand


body {
background: #74A0CD url("https://www.ebook-mecca.com/Themes/mobile-desktop/images/Beautiful-Cloud-Pictures-9.jpg") no-repeat fixed center top;
background-size: cover;
font:78%/130% Comic Sans MS;
}


Don't want repeat, but to fill background on all displays.