Redirect rule for mobile based on useragent?

Hi all. Is it possible to use the Netlify redirect rules to target mobile users—perhaps by looking at the user-agent header? I see docs here that let you target headers https://www.netlify.com/docs/redirects/#structured-configuration but it seems like they only let you do exact matches?

Hi @mrcoles, you can’t currently target specific user agents with Netlify redirects. Typically, people make sites with responsive layouts, use img srcset, etc. Can you tell me more about what you’re trying to accomplish with UA based redirects that you can’t do with these common techniques?

Thanks for the response @futuregerald! Yeah, I’m well versed in responsive layouts. At the moment, I’m working on a page that has a rather different looking mobile experience from desktop, so there’s basically mutually exclusive HTML, CSS, and JS between the two (also the desktop one still responsively supports mobile viewport widths, but just looks different from the explicit mobile view). So I thought this could (1) be a way to more cleanly keep the code for each version of the page separate and (2) allow for fewer bytes to be downloaded on each page. Also, I’m aware of the pitfalls of reading a useragent and that seems fine for at least my use-case here.

2 Likes

I have similar issue. I want to pre-render different static HTML page versions for mobile and desktop in an SPA, and redirect the user to a correct one on first load to avoid screen flickering.

Ideally I’d like to have a redirect rule based on screen size, not on user agent.

1 Like

this is an interesting use case - i think that you should chime in here:

Thanks for suggestion, I will do that.

1 Like

Hi,
I have a very convoluted use case for user-agent based redirects or user-agent based content. (content proffered to reduce SEO canonical url problems & further redirects)
I’m looking to implement https://philipwalton.com/articles/deploying-es2015-code-in-production-today/ which serves JS assets in both ES5 and ES Module format and let’s the browser decide which one to pick.
But there are few browsers which don’t comply very nicely: https://github.com/johnstew/differential-serving#tests for which I would prefer to serve only ES5 code.
So do you think this would be possible with Netlify? Can I use Functions to determine which pre-generated html file to serve?

I wouldn’t recommend it for SEO purposes - using a function for every request will add some additional time to serving each request, which might reduce the SEO value :stuck_out_tongue: