iPad 7th Generation landscape uses desktop media queries
-
We’re building a site with the customify theme, and noticed a strange problem on our new iPad 7th generation: Using Safari, in landscape mode, it looked horrible. We put together that it was using the media queries for the desktop (at least most of them) as if it was reporting its width to be greater than 1024px. On Desktop, using Chrome’s DevTools device emulator, it’s very clear that the breakpoint is between 1024 and 1025px. But even though all iPads are supposed to “be” 768×1024, it’s not doing what we’d expect. I ran the same test using https://pressmaximum.com/customify/ and indeed, I see the desktop styling with the iPad in landscape orientation, even though I see the mobile styling on my desktop with width set to 1024px.
This is arguably an Apple problem: their device is apparently not respecting the correct media queries (I checked to confirm that I wasn’t zoomed out, btw). However, who knows if we could ever get them to fix it, and since your theme put this breakpoint right at the exact width an iPad is supposed to have, your theme is looking bad in ways that most others don’t.
Any thoughts? Advice? I thought about doing a search & replace on the media queries to confirm that we could fix it if it were a few pixels different. That’s obviously not a good long term solution, but we might at least learn how to work around the problem.
The page I need help with: [log in to see the link]
- The topic ‘iPad 7th Generation landscape uses desktop media queries’ is closed to new replies.