0

Hey i have made both the desktop version and the mobile version of a website.so now when a visitor visit my website then how do i came to know that this visitor to my website using a mobile phone or PC?

To be more clear,when a visitor visit through mobile then it should redirect the visitor to the mobile version of my website and if through desktop then redirect to the desktop version of website? How can I do that?I am using HTML5 and CSS for ma website?

Any help is appreciated?

UPDATE--> What if i want to get the answer through the USER AGENT?

Geetanjali
  • 1,043
  • 3
  • 13
  • 37

4 Answers4

0

This page contains some tricks involving the size of the screen and User Agent matches that could be used.

trojanfoe
  • 120,358
  • 21
  • 212
  • 242
  • if we wrote for both mobile as well as desktop so will it work or not ? – Geetanjali Aug 30 '11 at 06:50
  • 1
    The idea is that you can put that detection code on the 'normal' page and redirect to a mobile-specific page if a mobile device is detected. Else you allow the current page to be rendered fully. Better is to use server-side scripting, like PHP. – trojanfoe Aug 30 '11 at 06:53
  • hey what about to get through the USER AGENT?how to do that? – Geetanjali Aug 30 '11 at 07:13
  • here it is specifically mentioned for iphone and ipad why?as iphone also has width<600 – Geetanjali Aug 30 '11 at 07:34
0

@Geetanjali; you have define device-width & meta tag in your html like this:

<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" media"screen and (max-device-width: 400px)" href="mobile.css">
<link rel="stylesheet" media"screen" href="main.css">

So, when user open your website in mobile then it's call mobile.css & it's overwrite main.css the properties for for your mobile website.

read these article for more http://x7.fi/2010/02/12/how-to-fit-your-website-for-the-apple-ipad/ , http://webdesignerwall.com/tutorials/css3-media-queries

sandeep
  • 91,313
  • 23
  • 137
  • 155
0

There are 3 main approaches you can take:

  1. Subdomain (m.domain.com is standard). Separate views optimized for the mobile devices you support. Best to always provide a link from the mobile site to the "full" site. You can also cookie folks for their preference.

  2. Device Detection This can range from heavy duty like WURFL to something simpler that does device detection (usually on user agent strings). Again provide the user with a link to the "full" site and cookie preferences.

  3. Responsive Design Use a fluid grid and media queries to create a Responsive Design that provides a good experience for all clients.

Of the 3 approaches, I think Responsive Design makes the most sense these days unless you need to support feature phones, then a combination of m.domain.com and Responsive Design.

steveax
  • 17,527
  • 6
  • 44
  • 59
0

You can use javascript navigator object to retrieve user-agent string. (Only problem with this approach is you will have to keep updating list of mobile device useragents every time a new device is invented.) Following question discusses detection of mobile browser using user-agents. Auto detect mobile browser (via user-agent?)

Community
  • 1
  • 1
Nilesh
  • 5,955
  • 3
  • 24
  • 34