Surely it's not some kind of meddling with the device width to make responsive web design even more confusing. That would be very odd.
My hope is that it's some kind of user agent manipulation that thwarts device sniffing so you don't see a mobile phone stylesheet or get redirected to a mobile site while using your iPad.
Yep, that's it. Even major websites have this problem, with YouTube being a particularly bad one. If you have an iPad handy try loading up YouTube, then do a long-press on the reload button and request desktop site. It's a much better experience.
I don't have the betas, but I expect Apple is applying this automatically based on viewport size. Full screen Safari instance? Desktop page. Narrow viewport in split or slide-over multitasking? Mobile page.
Wow. I've somehow missed this little gem. I usually requested the desktop site via the share sheet option but this is far nicer. Ditto for a quick way to disable content blockers. Thanks!
This is what always confuses me when people say "macOS/iOS is soooo intuitive!" - discoverability of features is well, horrible. You have to long/3d/long 3d press all manner of elements to discover, not to mention single/two/three finger swipes in differing directions, from screen, from edge.
Because these gestures are akin to keyboard shortcuts — they're not the only way to do achieve something, just a convenient shortcut. One could always request the desktop site via the Share sheet.
It's worse because keyboard shortcuts you could learn from the menu bar. Mac convention has been that all shortcuts should be discoverable there, and you even see the menu title flash when you hit it.
To your point about request desktop site being in the share sheet, that's true. But recently closed tabs are not.
Advanced iOS features are definitely less discoverable. But it's a trade-off for how easy the essentials are.
Personally I'm always impressed that people put up with this kind of stuff from Apple. Press the home button 3 times, hold it for 3 seconds then swipe in a Z shape to take a screenshot!
Yes, this. This bridges some gaps for sites that are built as either mobile-specific (but not truly responsive), or as desktop-only. I would have thought that the whole device detection, mobile-specific thing would have died many years ago, but it is stubbornly persistent. True responsive sites have worked fine for ages, and should continue to do so.
On the desktop-only site side, it looks like Apple has also done some interaction refinements for problems touch-based users can hit on these sites, especially around distinct hover vs. click interactions, the need to "tap-twice" to essentially "focus then click", etc.
Honestly, just using the basics of "responsive web design" (search phrase) is most of it. That is, implementing your site using CSS media queries to adapt your layout across multiple device sizes. Contrast that to using hacky device detection to deliver some entirely separate and "mobile-specific" site. One anti-pattern that often happens is the "mobile" detection is wrong, and delivers some phone-sized UI to a tablet. Instead just leverage CSS to make your site look good at the user's current display width, whatever that is, without having to know anything about the device. This is also great for desktop users, e.g. who might have your site in a browser side-by-side with something else, or similar.
All of the "evergreen" browsers have a mobile design view built into their dev tools these days. You can enable that, switch between specific device screen profiles, and continuously drag the "screen size" handles to watch your site's behavior at different sizes. This is great for development, since your web inspector view stays at full size.
Combining CSS media queries with CSS flexbox is a hugely powerful way customize the end-user experience for different devices. Flexbox not only makes basic layout adaptations straightforward (or free!), it lets you handle some otherwise tricky cases using tools like reordering support.
It's probably also worth searching for "mobile first web design" for further resources.
Thanks, looking at a few CSS frameworks I think I've been confused that they seem to have coarse resolution break values and I thought this was an anti-pattern ("don't detect mobile with a hard-wired resolution"). Maybe my mistake is to confuse resolution (after all modern phones often have equivalent resolution as many desktops) with width, so mobile is portrait, desktop often landscape. Instead of a mobile type presentation and a desktop type presentation just go with say one column if <600px or something, two columns if more and not worry if it's a mobile device. Maybe that's what the CSS frameworks are actually doing.
It's already available with a long press on the refresh icon, "request desktop site". Probably it'll let you request a mobile version now and requests the desktop site by default.
I hope it's more than this. A lot of sass websites have features inexplicably broken on the ipad pro, even though they display perfectly. And some google sites refuse to load. This is even if you request desktop.
But go to icab mobile, set user agent to desktop, and the sites load and work perfectly.
> desktop sites are now the default in Safari
Surely it's not some kind of meddling with the device width to make responsive web design even more confusing. That would be very odd.
My hope is that it's some kind of user agent manipulation that thwarts device sniffing so you don't see a mobile phone stylesheet or get redirected to a mobile site while using your iPad.