15 posts
  • Bought between 100 and 499 items
  • Has been a member for 5-6 years
  • United States
the4lab2 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!
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Referred between 500 and 999 users
  • Exclusive Author
  • Has been a member for 3-4 years
  • Bought between 10 and 49 items
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

141 posts Get in the spotlight
  • Author had a File in an Envato Bundle
  • Bought between 1 and 9 items
  • Elite Author
  • Exclusive Author
  • Halloween Competition Winner
  • Has been a member for 4-5 years
  • Most Wanted Bounty Winner
  • Sold between 250 000 and 1 000 000 dollars
+1 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
  • Power Elite Author: Sold between 1 000 000 - 1 999 999 dollars
  • Power Elite Author
  • Most Wanted Bounty Winner
  • Bought between 500 and 999 items
  • Referred between 500 and 999 users
  • Interviewed on the Envato Notes blog
  • Envato Studio (Microlancer) Beta Tester
  • Won a Competition
+8 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/
4188 posts Community Mod Building awesome stuff for your mobile devices!
  • Community Moderator
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Interviewed on the Envato Notes blog
  • Author had a Free File of the Month
  • Repeatedly helped protect Envato Market against copyright violations
  • Contributed a Tutorial to a Tuts+ Site
  • Won a Competition
+9 more
Enabled Volunteer 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