问题
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:
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)
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
回答1:
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.
回答2:
There are several options but this is my favorite:
- http://code.google.com/p/mobileesp/
Comes with a API in a couple of different languages as well
回答3:
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.
回答4:
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/
来源：https://stackoverflow.com/questions/6624073/best-practice-for-detecting-and-formatting-for-mobile-browsers