I made a portfolio website for myself. It looks nice and I'm pretty happy with it. I always used chrome's inspect element's device toolbar (mostly iPhone X size) to get everything looking how it's supposed to for all kinds of different devices. When I opened it on my iPhone XS, some divs positioning, gradient colors and alignments were all messed up. The backdrop-filter on my header also doesn't work. However, everything looks fine through messenger's integrated browser (besides backdrop-filter) which got me thinking that Safari must be the problem. I downloaded chrome on my phone and experienced the exact same problem. What could be wrong? Is it some compatibility issue? I noticed that CSS was spitting some compatibiity errors so I fixed them, pushed the file and uploaded it to my server but it still didn't help. Everything looks perfect and scales properly in inspect element.

I've set @media max-width to 1024px.

CodePudding user response：

If you want the element to be equal to the length of the screen, use "width: 100%;" If you want the width to be equal to the width of the screen, use "height: 100vh;"

CodePudding user response：

These were simply compatiblity issues. Since inspect element in Chrome doesn't actually emulate Safari running on an iPhone, that explains why I had issues in my phone but not in Chrome's inspect element mobile view. Using caniuse.com I found out that Safari only partially supports CSS gradients and had some unexpected behaviour when using the transparent tag which explains why some of my colors were messed up. Safari also didn't like position: absolute so I just had to position my div without it. backdrop-filter also required the -webkit- prefix to work.