5 ms·

As a web developer, what on earth does this mean? > desktop sites are now the default in Safari Surely it's not some kind of meddling with the device width to

by uses 7y ago

As a web developer, what on earth does this mean? > 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.

saidajigumi 7y ago
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.
- billforsternz 7y ago
  What is your criteria for a "true responsive site" and can you point to a good resource describing implementation details? Asking for a friend :)
  - kevin_thibedeau 7y ago
    Renders to a 640x480 CRT and 4K display without looking like crap on either.
  - saidajigumi 7y ago
    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.
    - billforsternz 7y ago
      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.
dep_b 7y ago
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.
- graeme 7y ago
  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.
  - graeme 7y ago
    Update: it is more than this. The preview mentions you can use google docs etc. You could not do that under the old "request desktop site" https://www.apple.com/ipados/ipados-preview/ https://www.apple.com/ipados/ipados-preview/
wlesieutre 7y ago
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.
- strmpnk 7y ago
  "long-press on the reload button" 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!
  - wlesieutre 7y ago
    The other Safari pro-tip: long press the new tab button to reopen recently closed tabs
    - wyre 7y ago
      Im always fascinated by program shortcuts almost no one knows about. How did you learn about long pressing in safari?
      - lexicality 7y ago
        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!
      - FireBeyond 7y ago
        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.
goerz 7y ago
I'm hoping that maybe with this I might be able to access a JupyterLab server with this in some useable way. Fingers crossed!

by uses 7y ago

saidajigumi 7y ago

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.

billforsternz 7y ago
What is your criteria for a "true responsive site" and can you point to a good resource describing implementation details? Asking for a friend :)
- kevin_thibedeau 7y ago
  Renders to a 640x480 CRT and 4K display without looking like crap on either.
- saidajigumi 7y ago
  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.
  - billforsternz 7y ago
    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.

dep_b 7y ago

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.

graeme 7y ago
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.
- graeme 7y ago
  Update: it is more than this. The preview mentions you can use google docs etc. You could not do that under the old "request desktop site" https://www.apple.com/ipados/ipados-preview/ https://www.apple.com/ipados/ipados-preview/

wlesieutre 7y ago

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.

strmpnk 7y ago
"long-press on the reload button" 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!
- wlesieutre 7y ago
  The other Safari pro-tip: long press the new tab button to reopen recently closed tabs
  - wyre 7y ago
    Im always fascinated by program shortcuts almost no one knows about. How did you learn about long pressing in safari?
    - lexicality 7y ago
      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!
    - FireBeyond 7y ago
      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.

goerz 7y ago

I'm hoping that maybe with this I might be able to access a JupyterLab server with this in some useable way. Fingers crossed!