4

I host a small web shop for a client who wants it to be easily accessible from mobile devices.

How do I detect if the user is browsing my site from a mobile device?

When I have done that, should I:

  1. Check if the user has mobile device and then forward them to another site? I think the advantages would be:

    • I can optimize layout from both sites for screensize
    • I can use different techniques in the two sites (eg. jquery mobile for mobile)

  2. Use CSS for the different screen sizes => like on tutsplus I think the advantage would be:

    • I only need one site but it seems to me heaps of work when talking about a small webshop
Rog
  • 16,650
  • 9
  • 48
  • 73
Dante
  • 525
  • 3
  • 8
  • 21
  • possible duplicate of [Detecting a mobile browser](http://stackoverflow.com/questions/11381673/detecting-a-mobile-browser) – Liam May 21 '15 at 13:12

4 Answers4

3

Ideally, you should try using jQuery Mobile page structure with your own CSS and JavaScript for non-mobile devices.

You can easily detect user's browser and conditional script includes as per html5 [boilerplate]:3

/* Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome)
consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-device-width: 480px) {

Main things to consider when aiming at iPhone users:

  • ensure there's no vital flash objects on the page as it isn't supported by many mobile browsers (yet?)
  • appropriate screen size (using viewport meta tag)
  • keeping in mind that there's no mouse cursors, meaning no hover/double-clicks are available any mouse dragging gestures are different on touch devices
  • remember all pop-ups are open in new tabs and won't be seen at the same time as the main window, use javascript modal divs as alternative
  • test all your javascript and css to ensure everything looks and works the same (Safari requires -webkit- prefix for the newest CSS properties)
  • create a Home screen icon for your website (a nice thing to have)

most of these things are covered here

take a look at Safari Dev Center for tutorials/videos/coding how to's etc.

Иван Грозный
  • 9,331
  • 12
  • 49
  • 84
2

There are several options but this is my favorite:

Comes with a API in a couple of different languages as well

Phill Pafford
  • 77,927
  • 86
  • 256
  • 378
1

You don't need jQuery at all if you don't want to use it. We don't. Not that there's anything wrong with that.

Number 2 is the best option. If you create a site with mobile in mind first, it's far, far easier to expand and manipulate for the desktop than trying to shrink things to a mobile screen.

Rob
  • 13,342
  • 26
  • 40
  • 60
  • jQuery (mobile) is just an example. It seems to me that there are is a different user experience when surfing mobile.So you would start from a site for mobile devices and if the user has a screen width that is bigger then eg 480px change the formatting – Dante Jul 08 '11 at 22:51
0

JQuery Mobile is currently in beta 1 right now. Beta 2 will be out within a month. It is fairly stable at the moment and you can gain a lot of knowledge about what is considered "best practice" from them. You can use media queries for screen sizes for different platforms which JQuery Mobile also supports.

http://jquerymobile.com/

Caimen
  • 2,578
  • 2
  • 22
  • 43