Geek Answers Handbook

Best practice for detection and formatting for mobile browsers

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

How to determine if a user is browsing my site from a mobile device?

When I did this, should I:

  • Check if the user has a mobile device and then redirected to another site? I think the benefits will be:

    • I can optimize the layout from both sites for screens
    • I can use different methods on two sites (e.g. jquery mobile for mobile).

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

    • I need only one site, but it seems to me that a lot of work when talking about a small online store
+4
source share
4 answers

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

You can easily detect the user's browser , and the conditional script includes as html5 [template]: 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) {

Key things to consider when targeting iPhone users:

  • ensure the absence of vital flash objects on the page because it is not supported by many mobile browsers (yet?)
  • appropriate screen size (using view meta tag)
  • bearing in mind that there are no mouse cursors, that is, no hover / double-clicks, any drag and drop gestures that are different on touch devices are available
  • remember all pop-ups are opened in new tabs and will not be displayed at the same time as the main window, use javascript modal divs as an alternative
  • check all your javascript and css to ensure that everything looks and (Safari requires the -webkit-prefix prefix for the latest CSS properties)
  • create a home screen icon for your website (a good thing to have)

most of these things are covered here

take a look at Safari Dev Center for tutorials / video / coding like etc.

+3
source

There are several options, but this is my favorite:

Comes with an API in several languages.

+2
source

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

Number 2 is the best option. If you first create a site with a mobile device, it is much easier to expand and manipulate it for the desktop than trying to compress things on a mobile screen.

+1
source

JQuery Mobile is currently in beta 1. Beta 2 will be released in a month. At the moment, it is quite stable, and you can get a lot of knowledge about what is considered “best practice” from them. You can use media queries for screen sizes for different platforms supported by jQuery Mobile.

http://jquerymobile.com/

0
source

More articles:


All Articles