downforacross / downforacross.com

Web frontend for downforacross.com -- continuation of stevenhao/crosswordsio
https://downforacrosscom.downforacross1.now.sh
MIT License
222 stars 92 forks source link

Keyboard/screen on iPadOS broken #196

Closed jonycgn closed 3 years ago

jonycgn commented 3 years ago

Hi,

I haven't played in a while, but I used to use Safari on iPadOS just fine with an external keyboard.

I checked back a few days ago, and now the functionality on screen is very much reduced. I can't see the list of hints and the puzzle side-by-side any more. Also, the dropdown menus have disappeared. Instead, I only see the puzzle. The ability to reset the puzzle & timer seems completely gone.

In addition, the arrow keys on the keyboard don't work any more. These were the main way of how I navigated the game.

I tried to set the browser to ask for the desktop version of the site, to no avail. It doesn't seem to make a difference if I set the browser to mobile or desktop.

I'm not very familiar with the code base, but saw there was a recent commit that changed the way iPads are detected (based on touch capability rather than what the browser reports). The reason that newer iPads may self-report as desktops is that they are getting more and more desktop features. In fact, with an external keyboard I was previously using it like a desktop with additional touch capability. So if that's the reason for the change, I'd recommend just going by what the browser reports, unless there is a strong reason not to.

Thanks!

stevenhao commented 3 years ago

Fixed by reverting https://github.com/downforacross/downforacross.com/pull/195 in https://github.com/downforacross/downforacross.com/pull/197.

stevenhao commented 3 years ago

It seems like reading the user agent strings is insufficient for determining exactly whether mobile or desktop mode is ideal.

I think the best solution is therefore to add a user-controllable setting (button in the nav bar + persist the setting in localStorage) that control whether or not to use "mobile mode".

jonycgn commented 3 years ago

Can confirm this fixed it! Arrow keys are back.

I'm not a web developer (not since many years ago, anyway), but how does the browser signal desktop/mobile to the server? I mean, what happens when you select "request mobile website" in the UI? Does that just change the user agent string or does it maybe set a HTTP header that you could use? Anyway, a user controlled setting should work in any case.

Thanks for the great site!

stevenhao commented 3 years ago

I'm not 100% sure how "request mobile website" / "request desktop content" works. I believe it changes the user agent string -- e.g. https://stackoverflow.com/questions/66316596/switch-to-mobile-site-dynamically-for-ios-13 lists

iPad Desktop site

userAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (JHTML, like Gecko) Version/14.0 Safari/605.1.15

iPad Mobile site

userAgent: Mozilla/5.0 (iPad; CPU OS 14_0_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like GEcko) Version/14.0 Mobile/15E148 Safari/604.1

the current code used by downforacross is:

function isMobile() {
  if (navigator.userAgent.match(/Tablet|iPad/i)) {
    // do tablet stuff
    return true;
  }
  if (
    navigator.userAgent.match(
      /Mobile|Windows Phone|Lumia|Android|webOS|iPhone|iPod|Blackberry|PlayBook|BB10|Opera Mini|\bCrMo\/|Opera Mobi/i
    )
  ) {
    // do mobile stuff
    return true;
  }