I have two html pages on my webserver
www.example.com/desktop.html
www.example.com/mobile.html
In principle the content and functionality of both is the same, although markup is different (mobile.html being build on jquery mobile).
What I would like to do is serve all mobile visitors www.example.com/mobile.html if they’re mobile, www.example.com/desktop.html otherwise but keep www.example.com in the address bar irrespective of device.
Additionally, once the visitor is on either page, I would like to provide a link to the other version and additionally store this preference in a cookie and serve it by default if/when they return in subsequent visits.
How can i do this?
I’d also like to take this opportunity to state how much I love stack overflow, it’s solved so many of the issues which I encounter.
Thanks
Add this to your .htaccess file:
I snagged the
%{HTTP_USER_AGENT}matches from that link in Rob W’s comment. You may want to revise it or try to find a more complete one on google somewhere. This essentially checks if the user-agent is a mobile one, and if so, rewrite the/request internally to/mobile.html, otherwise it rewrites it to/desktop.html. Since this is an internal rewrite, the URL Location bar on the browser remainswww.example.com.