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

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!

92 posts Be different!
  • Has referred 500+ members
  • Has sold $750,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+3 more
UnitedThemes says

Hi,

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

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

Hello,

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
  • Has referred 500+ members
  • Has sold $1M+ on Envato Market and is now a Power Elite Author
  • Has been a beta tester for an Envato feature
  • Has collected 500+ items on Envato Market
+13 more
MDNW says

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.

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
4351 posts Community Mod Building awesome stuff for your mobile devices!
  • Has referred 100+ members
  • Has sold $125,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 1+ items on Envato Market
+14 more
Enabled Moderator says

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!

by
by
by
by
by
by