How to force desktop display of embedded Airtable on mobile devices

I have a WordPress site where I’ve added an embedded Airtable view. The table displays perfectly when users visit from desktop computers, but when people access it from phones or tablets, it automatically switches to mobile view which removes several key features that my visitors need.

<iframe style="background: white; border: 2px solid #ddd;" src="https://airtable.com/embed/shrXYZ123ABC456?backgroundColor=blue&layout=grid&viewControls=on" width="100%" height="500" frameborder="0"></iframe>

This is my current embed code. Is there a way to prevent the mobile optimization and keep the full desktop version visible even on mobile browsers? I really need all the functionality to remain available regardless of device type.

Had this exact problem at my last job with data views for field teams. Mobile detection happens server-side before Airtable sends content, so CSS tricks won’t cut it.

Here’s what actually worked: Add &view=desktop to your embed URL (not the viewport parameter). Wrap everything in a container with transform: scale(0.8) and transform-origin: top left - makes the desktop view usable on small screens.

Best solution though? Use JavaScript to detect mobile and show a “View Full Table” button that opens the Airtable link in a new tab. Users get the mobile experience by default but can jump to full functionality when they need it.

Cut our support tickets way down - no more people struggling to pinch zoom on broken mobile tables.

I fixed this by changing the iframe’s user-agent string with a PHP function in my WordPress functions.php file. When mobile browsers hit the Airtable embed, my server-side script jumps in and forces a desktop user-agent before the iframe loads. Airtable never knows it’s mobile, so it skips the responsive layout entirely. You’ll need to create a custom shortcode that wraps your iframe and uses wp_remote_get with modified headers. There’s a slight performance hit since you’re proxying the request, but it completely sidesteps Airtable’s mobile detection. No more CSS hacks that break when your theme updates. Works great on all mobile browsers, even iOS Safari which usually ignores viewport tricks.

you can also add ?viewport=desktop to your airtable embed url - its not officially documented but usuallly works. another option is setting the iframes user-agent with css or js to fake a desktop browser, but responsive themes can mess with this approach.

Had this exact problem six months ago - the mobile view stripping features drove everyone nuts. I tried a viewport meta tag override first, but the better fix was forcing the iframe to act like desktop. Wrap your iframe in a div with overflow-x: auto and set min-width: 1024px on the iframe. This tricks mobile browsers into treating it as desktop content, so you get horizontal scrolling instead of Airtable’s mobile optimization kicking in. Users have to scroll sideways, but they keep all the functionality. Also check if your WordPress theme has mobile CSS messing with the embed dimensions.

This topic was automatically closed 4 days after the last reply. New replies are no longer allowed.