15 posts
  • Has been part of the Envato Community for over 5 years
  • Has collected 100+ items on Envato Market
  • Located in United States

How can I get my website to detect if a browser is on a smartphone/cellphone and show the user the mobile version of my website rather than the normal version? Any help would be appreciated!

97 posts Be different!
  • Power Elite Author: Sold more than $1M on Envato Market
  • Has sold $1M+ on Envato Market and is now a Power Elite Author
  • Has referred 1000+ members
  • Has collected 10+ items on Envato Market
+3 more


you need to check the user agent or the used resolution. Then you can start loading different CSS files for example.

960.gs a good start for it: http://adapt.960.gs/

Best Regards UnitedThemes

155 posts Get in the spotlight
  • Has been part of the Envato Community for over 5 years
  • Has sold $250,000+ on Envato Market
  • Had an item featured in an Envato Bundle
  • Has collected 10+ items on Envato Market
+6 more


You can use a “mobile detection code” in your normal website. Then redirect users to the mobile website url.

There is a lot of mobile detection codes on the WEB , like THIS one.

922 posts
  • Power Elite Author: Sold more than $1M on Envato Market
  • Has sold $1M+ on Envato Market and is now a Power Elite Author
  • Won a competition
  • Made it to the Authors' Hall of Fame
+13 more

You can also just write a media-query based CSS file for resolutions that are common to smart phones ;) No browser detection needed and no “separate site” needed – just a new CSS file to rearrange the the layout to look nice on a phone.

4771 posts Community Mod Building awesome stuff for your mobile devices!
  • Elite Author: Sold more than $75,000 on Envato Market
  • Helps us moderate the forums
  • Achieved the monthly Community Superstar Award
  • Has sold $125,000+ on Envato Market
+15 more

Well, there are 2 ways of doing this.

1. Create a responsive design, meaning, it checks for the screen resolution and sets some elements to display none, and loads others. The bad part is that a mobile phone user has a data plan, which, basically means he pays for each time he loads stuff he isn’t using. So, applying this method can hurt. But, nevertheless if you want to use this method, it’s quite simple.

@media screen and (max-width: 320px){
 /*CSS Style For Mobile Phone Screen With Max Screen Width 320 Pixels*/

Inside the above code nest your CSS code that is responsible for styling your mobile device, basically, construct a new site for the mobile. That means, you should set all divs that are related to the normal screen template to display:none; and all other elements must be display:block.

If you don’t know how to test it, well, nothing is simpler, re-size your browser until you reach that resolution. You should see it pop in :)

If you visit from a mobile device, it simply checks the resolution, puts all non mobile elements to display:none and shows the rest, taaadaaa! That’s one way of doing things.

The second one, is coding it for a specific resolution ( or fluid CSS ) and redirect from the main site. That is again, quite easy only, if you wish to redirect your users automatically you will need a few lines of jQuery.

(function(a,b){if(/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))window.location=b})(navigator.userAgent||navigator.vendor||window.opera,'mobile/index.html');

The last parts of the code are mobile/index.html. Replace it with the location of your mobile file. Save this code to a text file, save it as detectmobile.js and import inside your index.html file ( or whatever file you want to be seen as a mobile )

Note: You cannot test this from your computer, you need a mobile phone, the reason, it checks your browser signature. So, re-sizing your window will not help.

And voiala, when your users visit the site, it will automatically take them to the mobile version. This code applies for kind of all mobile devices. :) But there is a way to test it from a computer. Opera launched a mobile interface tester, which has the opera mini signature. Meaning, if you access this site and type your address in there, if the above jQuery is loaded in your page properly it will redirect it to the mobile version! :)

I use a combination between both, but preferably, if you want a happy user, make the mobile site as lightweight as possible using only PNG files. If his page is large, he might end up paying a lot for a visit :) ( If he doesn’t have a DataPlan of course )

If you need more help, shoot me a e-mail through my profile :) Best of luck!

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes