Situation
I am in the process of creating a website for a client. The site is functioning properly when viewed on desktop both locally and externally, but there seems to be an issue when accessed on mobile devices. The background images appear overly zoomed-in on mobile, however, when I utilize Chrome DevTools and switch to mobile view, everything appears as it should.
Below is an image depicting how the website layout should look:
https://i.sstatic.net/5ImDh.png
And here is an image illustrating the current appearance:
https://i.sstatic.net/WYRrR.png
Provided below is the CSS for the header element:
.header {
position: relative;
width: 100%;
height: 100vh;
background: url("../img/header-2.jpg");
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-position: center;
background-attachment: fixed;
overflow: hidden;
}
Query
What could be causing this discrepancy between the appearances on different devices, and why does Chrome DevTools indicate that everything is running smoothly?
If further details are required, please feel free to request and I will provide them promptly.
edit
This issue appears to be exclusive to IOS devices. Every individual I have asked to test on such devices has reported seeing the same overscaled image on their screens.