How to run Notion in desktop mode on iPadOS Safari

README.md

How to run Notion in desktop mode on iPadOS Safari

Since iPadOS 13, Notion should show in desktop mode on iPadOS Safari, which is more fully-featured and pretty much fine for touch/pointer input.

In case you're from Notion and reading this, the things I generally don't like about that interface are:

• Animations are oddly laggy
• Full-screen popover modal menus instead of popping over contextually
• Less hover states
• Larger UI elements (I don't personally need these since I use a trackpad)
• Small missing features or different UI (in particular around the settings panel)

As far as I can tell, the reason Notion do this is to avoid triggering Apple, because if you can do things like add users or change the payment plan, they should be giving 30% to Apple. But that only applies to the mobile app, not the desktop experience.

To determine if you're on an iPad, Notion test for:

!a() && (/iPad/i.test(t.userAgent) || "MacIntel" === t.platform && "ontouchend" in document)

i.e., you're an iPad user if you're not on Android, and if your user agent shows as an iPad (non-desktop mode), or if your platform shows as MacIntel and you have a touch screen. The cheapest way to block this is to change navigator.platform to something else.

Re-loading the modified script

To modify & reload the script, we need to use a custom userscript. On iPadOS 15, we can download a Safari extension that will run a custom script for us. I'm using Userscripts, but other userscript extensions will work too.

1. Select a userscripts folder (I selected one in iCloud Drive and synced over from my computer)
2. Download notion-desktop.js below and put it in that folder
3. Enable the Userscripts extension on notion.so

Now you should see the full desktop view!

notion-desktop.js

// ==UserScript==
// @name Notion Desktop Mode
// @version 0.1.0
// @match *://*.notion.so/*
// @inject-into page
// @run-at document-start
// ==/UserScript==

var codeToInject = 'Object.defineProperty(navigator,"platform", { \
  get: function () { return "Linux x86_64"; }, \
  set: function (a) {} \
 });';
var script = document.createElement('script');
script.appendChild(document.createTextNode(codeToInject));
(document.head || document.documentElement).appendChild(script);
script.parentNode.removeChild(script);

Thank you for providing a great script! I tried this code and also changed navigator.userAgent, but in most cases it didn't seem to work😭Sometimes it works, but does it depend on the load order of Script? If you know something, I would be happy if you could tell me!

Yeah, it’s gotten really flaky over time and essentially doesn’t work at all for me anymore. It’s definitely to do with the load order of the script, which is something you can’t really control because of the way iPadOS extensions load—but I assume Notion might have done some more patching on their side.

I might expand this into a proper extension in the future. Not totally sure what the best way forward is right now.

Thank you for your reply😊 That's right after all.

If you use an app for desktop display, it works well on iPhone, but it doesn't work well on iPad. Notion may be doing additional processing only for the iPad.

I’m currently using this, but I don’t know why it works randomly.
Sometimes it doesn’t work…