# Routing based on browser width **URL:** \ **Category:** Rails\ **Created:** [September 6, 2009, 6:53am UTC](https://www.ruby-forum.com/t/routing-based-on-browser-width/175021 "2009-09-06T06:53:23Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![dansinker](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/d/65b543/32.png) [@dansinker](https://www.ruby-forum.com/u/dansinker)\ **Post date:** [September 6, 2009, 6:53am UTC](https://www.ruby-forum.com/t/routing-based-on-browser-width/175021/1 "2009-09-06T06:53:23Z")
I have a site that’s directed toward mobile use. As a result, the basic structure consists of pages that render exclusively on mobile devices, and then corresponding pages for desktop browsers that explain that they need to come back on a mobile device. Currently, I’m using Javascript on the mobile page to detect browser width and then it redirects to the desktop page if it’s above 480px wide. That works fine, but it’s less than perfect when people link or bookmark the desktop page, it never redirects back to the mobile one. And, it seems to be less than perfect for search engines as well. Here’s what I’ve got now: index.rhtml renders first and tosses this Javascript at it: { winWidth=document.all?document.body.clientWidth:window.innerWidth; if (winWidth \> 481) location=“\<%= url\_for({:controller =\> ‘info’, :action =\> ‘share\_welcome’, :id =\> @story, :only\_path =\> false, :protocol =\> ‘http://’}) %\>” } So you can see, it directs browsers over a certain width to, in this case, share\_welcome.rhtml So, in a desktop browser, the index page looks like [mysite.com/](http://mysite.com/) share\_welcome, while a mobile browser just sees [mysite.com](http://mysite.com) There’s _got_ to be a way to route this browser width logic ahead of page load so that it’s always [mysite.com](http://mysite.com) no matter what, right? Is it possible to build this into routes.rb somehow? I’m stumped. Any ideas? Thanks so much! Dan ---
**Author:** ![dansinker](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/d/65b543/32.png) [@dansinker](https://www.ruby-forum.com/u/dansinker)\ **Post date:** [September 6, 2009, 4:11pm UTC](https://www.ruby-forum.com/t/routing-based-on-browser-width/175021/2 "2009-09-06T16:11:49Z")
On Sep 6, 12:51 am, dansinker [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) wrote: > bookmark the desktop page, it never redirects back to the mobile one. > ‘http://’}) %\>" > > Is it possible to build this into routes.rb somehow? > > I’m stumped. Any ideas? > > Thanks so much! > > Dan My browser (Firefox 3.5) does not send browser width-at-the-time information in the request headers. I doubt any browsers do, so you can’t use this in any sort of routes or respond\_to shinanagins. If you need your application to perform differently depending on different user agents, you need to relay on the User-Agent header. This will of course require some research to find the UA’s that your app needs to consider as mobile devices, and be ready to respond to user feedback when someone browses with a UA you did not anticipate. ---
**Author:** ![dansinker](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/d/65b543/32.png) [@dansinker](https://www.ruby-forum.com/u/dansinker)\ **Post date:** [September 6, 2009, 4:15pm UTC](https://www.ruby-forum.com/t/routing-based-on-browser-width/175021/3 "2009-09-06T16:15:55Z")
On Sep 6, 10:09 am, pharrington [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) wrote: > > width and then it redirects to the desktop page if it’s above 480px > > { winWidth=document.all?document.body.clientWidth:window.innerWidth; > > share\_welcome, while a mobile browser just sees [mysite.com](http://mysite.com) > > Dan > > My browser (Firefox 3.5) does not send browser width-at-the-time > information in the request headers. I doubt any browsers do, so you > can’t use this in any sort of routes or respond\_to shinanagins. > > If you need your application to perform differently depending on > different user agents, you need to relay on the User-Agent header. > This will of course require some research to find the UA’s that your > app needs to consider as mobile devices, and be ready to respond to > user feedback when someone browses with a UA you did not anticipate. Of course, if all that needs to change though is client-side behavior (pages need to be rendered differently etc), perhaps reasoned and judicious use of Javascript+CSS is the better approach. ---
**Author:** ![dansinker](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/d/65b543/32.png) [@dansinker](https://www.ruby-forum.com/u/dansinker)\ **Post date:** [September 7, 2009, 5:23pm UTC](https://www.ruby-forum.com/t/routing-based-on-browser-width/175021/4 "2009-09-07T17:23:42Z")
On Sep 6, 12:51 am, dansinker [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) wrote: > I have a site that’s directed toward mobile use. As a result, the > basic structure consists of pages that render exclusively on mobile > devices, and then corresponding pages for desktop browsers that > explain that they need to come back on a mobile device. > > Currently, I’m using Javascript on the mobile page to detect browser > width and then it redirects to the desktop page if it’s above 480px > wide. This seems like an ultimately doomed strategy - the 480px limit you’re using is exactly met by the iPhone, the G1 and the Pre (in landscape), and exceeded by the Kindle. Then there’s the much-rumored “iPhone tablet”, which will completely exceed that if it ever appears. It would seem more logical to either just show the pages to everybody, or to detect user agents as others in the thread have suggested. –Matt J. ---
**Author:** ![dansinker](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/d/65b543/32.png) [@dansinker](https://www.ruby-forum.com/u/dansinker)\ **Post date:** [September 7, 2009, 8:17pm UTC](https://www.ruby-forum.com/t/routing-based-on-browser-width/175021/5 "2009-09-07T20:17:18Z")
dansinker wrote: > I have a site that’s directed toward mobile use. As a result, the > basic structure consists of pages that render exclusively on mobile > devices, and then corresponding pages for desktop browsers that > explain that they need to come back on a mobile device. Please don’t do this. If it’s optimized for mobile use, that’s great, but there may be some use cases that you didn’t envision where it would be convenient to use a desktop browser. You may not like it, but you shouldn’t prevent your visitors from using the browser of their choice. ## Best, Marnen Laibow-Koser [http://www.marnen.org](http://www.marnen.org) removed\_email\_address@domain.invalid ---
**Author:** ![dansinker](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/d/65b543/32.png) [@dansinker](https://www.ruby-forum.com/u/dansinker)\ **Post date:** [September 7, 2009, 9:10pm UTC](https://www.ruby-forum.com/t/routing-based-on-browser-width/175021/6 "2009-09-07T21:10:16Z")
Seriously. Why bother disabling desktop browsers? I’ve seen a number of mobile sites that render fine in any number of desktop browsers. If you want to optimize layouts for particular browsers, you can turn your layout call into a method. You can then put user-agent detection there to render a particular layout customized for the particular browser or device. If you really want to do redirection, it may be possible to sneak that in there. I’ve never tried it myself, though. On Sep 7, 11:17 am, Marnen Laibow-Koser \