开发者

Problem on redirecting website for either mobile or desktop version?

开发者 https://www.devze.com 2023-03-31 11:08 出处:网络
Hey i have made both t开发者_运维知识库he 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

Hey i have made both t开发者_运维知识库he 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?


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?)


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


@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


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.

0

精彩评论

暂无评论...
验证码 换一张
取 消