0

I want to detect if the user that visit my website is using mobile or pc, if he is using pc the code should load special css and html code, else the code should load different css and html code(both html and css for both devices IN THE SAME FILE).
For detecting the device, I checked many codes but unfortunately they all provide that only for special mobiles(iphone, ipad, android, blackberry, galaxy...), I want a code that works for whole mobiles.
Example of device detection:

function DetectIphone()
{
   var uagent = navigator.userAgent.toLowerCase();
   if (uagent.search("iphone") > -1)
      alert('false');
   else
      alert('true');
}

The problem in this code that it works only for iphone.

user3046307
  • 1
  • There are plenty of existing answers here on SO. Have a look at [this](http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-handheld-device-in-jquery) and [that](http://stackoverflow.com/questions/15610433/detecting-mobile-devices) or give google a try! – RienNeVaPlu͢s Nov 28 '13 at 14:41
  • Using `@media` for different screen sizes would be a better option than device detection using `Javascript`. – Nick R Nov 28 '13 at 14:44

2 Answers2

0

If you've worked with Twitter Bootstrap before, you'll find that they use @media to differentiate css for different devices. This link should help, you should not have to write custom code to determine device type.

http://www.w3schools.com/css/css_mediatypes.asp

user1883004
  • 407
  • 2
  • 7
  • 16
0

you can use media queries like this : (this is the CSS way)

@media (max-width: 600px) {
  .selector {
    /* some style */
  }
}

this style do for devices with max-width:600px and you can change it as you want.

learn more here

Mohsen Safari
  • 6,163
  • 5
  • 37
  • 55