I have a very simple website that displays images in a vertical gallery (one image per row) using CSS Grid Layout:
.gallery {
display: grid;
grid-template-columns: 1fr;
grid-auto-rows:minmax(375px, auto);
row-gap: 450px;
padding-top: 100px;
}
.gallery-image {
display: flex;
align-items: center;
justify-content: center;
}
header {
display: flex;
justify-content: center;
padding-bottom: 3vw;
}
In my HTML I have an alternate, small image that should display when the viewport width is < 1200px:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<title>iOS viewport test</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Testing!</h1>
</header>
<main>
<div >
<div >
<img srcset="https://upload.wikimedia.org/wikipedia/commons/4/47/A-Group-Of-Icebergs.jpg 356w,
https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Beijing_national_stadium.jpg/1024px-Beijing_national_stadium.jpg 1024w"
sizes="(max-width: 1199px) 356px,
1024px"
alt="Just testing.">
</div>
</div>
</main>
</body>
</html>
The small image displays as expected when resizing a browser window below 1200px on a desktop. When I load it on my iPhone (in either Safari 15.1 or Firefox 40.1; browser viewport width 375px, DPR 2), the larger 1024px image is loaded and shrunk to fit the 375px logical width of the viewport.
What I've tried
The standard solution seems to be to set the viewport to the size of the display with <meta name="viewport" content=[...]>. I'm not sure if this would use the actual display size (750px) or the logical size (375px), but in either case the media query condition in the HTML should match, showing the smaller image. But it doesn't.
I followed a couple of other suggestions I found on blogs and similar SO questions: set user-scalable off in the viewport meta tag, or set shrink-to-fit=no. Both of these tags are said to have no effect in recent versions of Safari, and neither fixed my issue.
My Page Zoom setting in Safari is set to 100%.
Any ideas on what might be going on, and the proper way to fix / account for it?
CodePudding user response：
The first image will show up when width is 356px to 1023px. Otherwise the second image shows up.
<div >
<div >
<img srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Beijing_national_stadium.jpg/1024px-Beijing_national_stadium.jpg 1023w,
https://upload.wikimedia.org/wikipedia/commons/4/47/A-Group-Of-Icebergs.jpg 1024w"
sizes="(max-width: 1199px) 356px,
1024px"
alt="Just testing.">
</div>
</div>
CodePudding user response：
I found the following comment on another SO question:
The browser will multiply the value from the sizes attribute by the device's pixel ratio prior to choosing from the list of widths in the srcset attribute.
This explains why the original sizes were not matching the srcset widths. After changing my img tags as follows, the correct (smaller) images are loaded in both Safari and Firefox on iOS:
<img srcset="https://upload.wikimedia.org/wikipedia/commons/4/47/A-Group-Of-Icebergs.jpg 356w,
https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Beijing_national_stadium.jpg/1024px-Beijing_national_stadium.jpg 1024w"
sizes="(-webkit-min-device-pixel-ratio: 2) 178px,
(max-width: 1199px) 356px,
1024px"
alt="Just testing.">