<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "mobile.html";
}
//-->
</script>“mobile.html” would be replaced with the location of wherever your mobile version resides. This technique could be adapted to load an alternate stylesheet as well.
For iPhones/iPods Specifically
<script language=javascript>
<!--
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
location.replace("http://url-to-send-them/iphone.html");
}
-->
</script>
Nice and concise! thanks
Thanks a lot @anon. I find it very useful also.
no safari
Works just fine with Safari on iphone for me, if you are using safari on a desktop you’ve got bigger problems.
Works Great
What if mobile phone can not use JavaScript?
Did you ever get an answer to your question? I have the same concern.
Reuben
USE PHP!!! :D
I use this
you’ll have to change the extension on your page from .html or .htm to .php so the server knows to process the script. Also this needs to be before the <html tag – ie the first line on the page. To add a device just add it to the if statement under the mobileDevice() function
function mobileDevice()
{
$type = $_SERVER[‘HTTP_USER_AGENT’];
if(strpos((string)$type, “Windows Phone”) != false || strpos((string)$type, “iPhone”) != false || strpos((string)$type, “Android”) != false)
return true;
else
return false;
}
if(mobileDevice() == true)
header(‘Location: http://www.m-tek.biz/mobile.html‘);
It should work with major smartphones (eg iPhone, Driod, Blackberry, ex.) If the phone can’t read Java, then unless your website is only text, it won’t be able to read your website anyways… But this link was tons of different methods like PHP
http://www.stepforth.com/resources/web-marketing-knowledgebase/redirect-mobile-iphone-visitors-mobile-content/#.T75jTLd5mc0
This code does not work on javascript-disabled phones or browsers. But most of the smartphone users these days have javascript enabled.
But and devices that do not work with javascript?
Most devices now-a-days do have javascript capabilities.
in the iPad/iphone version.
Is it suppose to say…
“navigator.userAgent.match(/iPod/i” or
“navigator.userAgent.match(/iPad/i” ????
It says iPod/iPhone version, no iPad at all
What about javascript for rails application as it is not working for mobile application?
This works great!
One thing: Once a mobile user logs onto the site it takes them to the mobile site. I want to let them be able to go to the full-version site. But of course when they click on the link, it redirects them to the mobile site.
Any help is appreciated!
You ever get an answer back on this? I was wondering the same thing.
Why don’t you just clone the non mobile site(w/out the javascript mobile redirect) and make it index1.html and make that the link from the mobile site?
I used the clone methed(by geoffrey Freedom) and it works great, I only did it for the home page so “index1.html” has no flash so the handhelds can display the images I use with jquery if they use the full site.
Google penalizes for duplicate content, so when cloning your index (or any page) may want to create a mostly new way to write the page content.
for the clone website you can just add the no follow meta tag on the clone. that way google won’t penalize you.
Set a cookie.
Interaction w/ the cookie can save the value of if the user wants the mobile or full site, or simply the presence of can be used to continue the function or die.
Wrap your switcher in a if/then statement, and if the user chooses to go to the full site, it sets the cookie and reloads. The reload will run through the if/then switcher, but by adding a line to check if cookie exists, that means if it does then the user opted IN for the full site and OUT of mobile, sending to mobile sheets or mobile site stops right there, no duplication of content, saves your google ranking and to undo the no-mobile, they simply clear the cookie. No cookie? Then the user detection runs, picks mobile or full until the user decides otherwise.
Its kind of cobbling old school to new school, but it does let you set a reference point per user without building a whole redundant site for a what if situation…
If you have not managed to get round this yet. To get round the looping caused by this problem, you need to clone the index.htm file and name the new file index1.htm. Then the latter page is the point of destination when the full web button is pressed.
SIMPLES!!
I think cloning the index has other issues. I find the best simple solution (without messing with cookies) is to set another if statement within the script
if <screen.width <= 699) {
if (document.referrer.indexOf(‘mobile.html’) == -1){
document.location = “mobile.html”;
}}
In english that’s
“if the screen width is less than 699px,
and I am not already coming from the mobile page,
send me to the mobile page”
Thanks Shawn Taylor – your solution worked perfectly!
THis is not working for me how would i put this?
if <screen.width <= 699) {
if (document.referrer.indexOf(‘mobile.html’) == -1){
document.location = “mobile.html”;
}}
Sorry, I messed up the code-in-comment specifics… here you go:
Argh – still messed it up, and can’t see how to edit a comment – that < should be a smaller than symbol… I’ll try again:
ps – anyone know how to edit a comment?
Here is what mine looks like, Without the going back to desktop works fine. Its when i put the “Desktop Site” link that gives me the problem. Thanks you in Advance for your attention.
<!–
if (screen.width <= 699) {
document.location = "http://site.com/mobile/";
}
if (screen.width <= 699) {
if (document.referrer.indexOf(‘http://site.com/mobile/) == -1){
document.location = “http://site.com/mobile/”;
}}
Hey Josh,
Looks like your running the redirect twice, and the first time is without any secondary if statement, so it will always redirect. you need to just run it once, with the “if from mobile, don’t redirect to mobile” if state, which is the if (document.referrer.indexOf(‘http://site.com/mobile/) == -1)… hope that helps.
Hey Nate, I simply put a link on the mobile site to the desktop site, so if anybody wants to visit that on their phone they can. Works well.
If a user klicks on a link on the mobile site und goes to the classic site you set a cookie.
on the classic site you first read the cookie and only if its not available you’re going to redirect the mobile users
regards
I’ve found this problem too! Please let me know if youve resolved this issue
No more Mobify? You should do a post on mobile sites ;)
thanks you men !!!!!
Outstanding… a simple, elegant solution… thank you…
How to include android phones?
works fine with android phones.
May have to make a small modification… what with the Galaxy Nexus as well as any forthcoming Android phones that have 720p resolution screens. The above code in the OP would wind up directing a GNex user to the desktop version of the site I reckon. As nice as 720p resolution is, the screens themselves are still far too small to make desktop site viewing a pleasant experience on a phone.
Good article,
also maybe try to check out my script called “redirection_mobile.js”. It detects the User Agent and redirects to a mobile version if you’re accessing a site from a mobile device.
In some case you want to redirect from a mobile device to a desktop version (like with a link “Go to the main site”), the script will handle that and once you finish your session, you’ll access to the mobile version again.
You can find the source code on github here https://github.com/sebarmeli/JS-Redirection-Mobile-Site and you can read more details in one of my article here:
http://blog.sebarmeli.com/2010/11/02/how-to-redirect-your-site-to-a-mobile-version-through-javascript/
Thanks for the code. I’ve already tried this with an iPhone 4 and it works great but, for some reason, it’s not working on a HTC Desire HD – it just goes straight to the full site. Is there a fix for this? Thanks!
Woo hoo!
Thanks for posting the link. I tried the solution on css-tricks and it worked great. But your js solution gave me the greater control that I needed for linking back to the full version of the website.
Thanks!
Hi
sebarmeli
im new to coding..i tried this code
<!–
if (screen.width
. with this code the website goes perfectly to mobile version but by clicking the link (like with a link “Go to the main site”), but it don’t get back to full version of site. And also i tried u r suggesting from given link above in your post.. but i can’t get revert back the web site as full site from mobile version in mobile.
plz give me the brief explanation and suggestion which is successfully execute how to switch the site from desktop to mobile and mobile to desktop version.
hi its very cool thanks buddy
how about for blackberry solution..
thanks in advance.
Did you ever find a blackberry solution? Anyone, any help is appreciated.
My blackberry curve works just great with the simple code above.
Thank you very much!!!
Ive been searching for this code all day!!:D
great thanks
Once changed to
window.locationit worked! Thanks!Nice. Thanks this worked on my iPod but not on the iPad.
iPads are ok for regular sites because the screen is big enough.
Can someone list which mobile devices this script works on?
Thanks.
It works on any device with a screen width below 699 pixels. This includes iPhone/iPod 4g with retina display. You can adjust the 699 to a higher number, but I would not because of old monitors with a 700 width.
If you are targeting iOS devices, you can use the second one, editing
—
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
—
to
—
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || navigator.userAgent.match(/iPad/i))) {
By standards, it works on any device with a screen width below 699, and JavaScript enabled. But there are always exceptions. (Like CSS3 in IE6, for example).
Hey Mooseman,
I tried swapping in your code for this to work on ipads, but when I did dreamweaver told me that there was a syntax error on the edited line. Any suggestions as to how I could fix that? Thanks so much.
Steve
is this redirect seo friendly
after implementing this for a mobile site
my Google ranking went down and i am wondering if this affected my seo
As I understand it, the code is on the full-screen site, it just redirects, so the phone doesn’t have to use java.
Awesome trick! Thank you, i’ll use it on my tumblr blog. :)
Can any one have idea to solve through .httaccess?
Hi,
How to redirect …desktop/page1.html to …mobile/page1.html, …desktop/page10.html to …mobile/page10.html…etc…for more than 300 pages.
So not just to …mobile/index.html
Thanks for your help
If you redirect via the Location object you will lose the HTTP referrer from the original request. This means all of your mobile traffic will appear as direct traffic in your analytics.
I think server-side detection is preferred. Some options:
http://detectmobilebrowser.com/
http://wurfl.sourceforge.net/
Thank you so much! Works perfectly and so simple!!!
Very nice work on this! Took me a lot of searching but this is what we needed.
That’s so helpful, thank you!
JavaScript doesn’t work at all… so I decided to use the .htaccess file to redirect mobile devices.
http://stackoverflow.com/questions/3680463/mobile-redirect-using-htaccess
Consider, if someone doesn’t want to redirect to the mobile version of your site implement a “Regular Site” button on the mobile version.
Thank you so much for this javascript code!
Thank You so much for provide dis easy code :)
i would choose media querries…so i can handle it with css and i dont need a 2nd (?) website with the same structure & (maybe)content :-)
a good server-side (php) script about this application can be found at
http://code.google.com/p/php-mobile-detect/
isAndroid(), isBlackberry(), isOpera(), isPalm(), isWindows(), isGeneric()…
and the isIOS mode?
Awesome, thanks so much for this, helped me tons !!
Need a script like this for a client. Works perfectly. now they can have just the tools from our site in a mobile device rather than the whole site. Love it.
Thanks for a quick, simple solution!
Wonderful code, thanks for the tip…
I pasted the code, and when I load the page on my iPod touch, i get “Page Not Found”…any suggestions?
Great script — thanks
I can’t tell you how happy I was that this actually worked the first time I tried it, thanks for making my life so much easier!!!
Thanks! Great script, simple solution, love it.
Another solution using php can be:
<?php
if(strstr($_SERVER[‘HTTP_USER_AGENT’],’iPhone’) ||
strstr($_SERVER[‘HTTP_USER_AGENT’],’iPod’))
{
header(‘Location: http://www.domain.com/iphone‘);
exit();
}
else if(strstr($_SERVER[‘HTTP_USER_AGENT’],’iPad’))
{
header(‘Location: http://www.domain.com/ipad‘);
exit();
}
else{
header(‘Location: http://www.domain.com/web‘);
exit();
}
?>
You can add “else if” alternatives for other user agents. Of course it works in servers with php support.
Regards.
Thank you for the php version!!!
Great script. I’ve been using it for a couple of weeks and it works for everyone that has used it, but for one. He has an iPhone 4 and it keeps giving him the old landing page. The script isn’t redirecting him.
I asked if his javascript was turned off and he said no. The odd thing was the link worked for him earlier. I wonder if his cache, cookies or history are screwing him up?
Has anyone had any problems like this before?
The site is http://www.criticalpr.com
If I have a home for iPhone, a home for Droids and a home for computer browsers, in order to send visitors in one of three directions, do I insert the script like this:
<!–if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) { location.replace(“http://url-to-send-them/iphone.html”);}–>
<!–if (screen.width
??
When I’m trying to add Android, my iPad is not redirected anymore.
My code is:
Any idea ?
It’s error.
You saved my life! Thank you!!
This technique is very intuitive, but a PHP detect/redirect is more efficient. Check out the following site for a complete detect/redirect, and option to view full site:
http://www.squidoo.com/php-mobile-redirect
This is an odd one, but is there a way to do the reverse. I’ve built a mobile site and I want to direct people if they land on this URL to another site.
Dave,
You can redirect using .htaccess. I am kinda confused about what you are trying to do though. Are you wanting to redirect everyone that lands on your mobile page to another site??
I’ve built a site using WordPress that is only for mobile users. Because of the contract with the festival…I need to send desktop users to the main website and not the mobile one I created.
I guess if I don’t advertise the URL it won’t matter anyway, and they can direct mobile users from there site to mine.
But I guess regardless I’d like to have nobody viewing the mobile site that I created on a desktop.
Dave
Dave, here is a simple solution using PHP:
<?
Header( “HTTP/1.1 301 Moved Permanently” );
Header( “Location: http://www.new-url.com” );
?>
You saved me! This is just how great, for me as a “non-developer” this was awsome, when i just “launched” the mobilesite for our event! Thanks again!
just what i was looking for …….
this works great… but how can i re-direct users back to the main site from their mobile devices if they want to see the desktop web version of the website? thanks.
Set a cookie when they visit the mobile site, and check for the cookie prior to the redirect.
A complete solution for redirect/ view full site using php can be found at the following:
http://www.squidoo.com/php-mobile-redirect
Thanks Matt… this php script is very glitchy. I implemented everything properly, but sometimes it directs to the mobile site, other it just doesn’t. Also, it seems like the only way to redirect from Mobile to Full site is by making the link with http://www.yoursite.com// with double slash at the end (weird, not sure why)…
One question: in the link you provided, the article mentioned this line of code:
Where should I put that?
Thanks a lot.
That goes on your mobile page. It sets the cookie to bypass the mobile redirect when you want to view full site.
That goes on your mobile page. It sets the cookie to bypass the mobile redirect when you want to view full site.
I have not seen it acting glitchy. The code you are talking about should be placed on the mobile index page. That is the PHP code that will set the cookie to override the mobile redirect when you try to view your full site.
Best way i found is;
//
??
You could actually as well check if the user’s browser accepts mime types with WML. If it does then it’s probably a mobile device. Then no need to worry about JS
Nice little script. Where in the document do you place this js? in the head or in the body or wherever you want?
Anywhere…
I would think that this JS would go in the head, before any full-site CSS and content, therefore redirecting before loading unnecessary files. That can be slow on mobile and take up valuable KB transfer.
I have a slightly different solution that I will post here tomorrow. It’s a different take on this awesome snippet but ads a little helper for a request that people have been asking for.
Cool stuff CHRIS, thanks !!
This is the best javascript mobile redirect I have found. It’s rather perfect and handles all the cookie, redirect to and fro the mobile and full site. And does it with screen width like your above script does.
https://github.com/miohtama/detectmobile.js
i am asking doubt about the “slide to unlock”.i want the page to redirect to another page after the unlocking
soory for asking this the thread for unlocker was closed that’s why asked here
i fixed it ,
can anyone tell me how to make the slider to left side?please
this seems a bad approach – you either force your mobile user to a site that is a subset of your main site, and they can’t do anything about it, or you put this snippet in every page and every new page to re-route to a mobile equivalent? Just botu workable for a small site I guess but otherwise look at something else.
Basic question: How do I manage and update a mobile subdomain so that the user can have the optionality of switching back and forth between the mobile and desktop version of the site? In other words, what is the best way to ensure that the content remains the same on both sites, and only the layouts change? Or do I have to manually update and upload the desktop site, then manually update and upload the mobile site?
i like my take better :D
in the array “namen” you can add as many types as you want, as long as any of the names are somewhere in the UserAgent of the devices Browser it will return true
Do you have to convert this to .js I get data base error.
Here is more in-depth Javascript solution, provided as a library:
detectmobile.js
Read the documentation for answers for some of the posted questions.
Works great: I have tried it on the following page: http://www.muqstuff.weebly.com an dit redirects perfectly but what if you want the code to activate before the page loads? For me, the page first loads and then redirects, is there anyway to get around this?
We’re a group of volunteers and opening a new scheme in our community. Your web site offered us with valuable info to work on. You have done a formidable job and our whole community will be thankful to you.
Hi all i am new here and
everyone is talking about redirect to the mobile website
but what if i want to redirects Visitors when they try to view your WebApp or mobile site on a PC.
i want pc users that go manualy
from http://www.mobile.domainname.com
to http://www.domainname.com
can anyone do that?
thanks
Keen to give this script a go.
Just what I was looking for..thanks! :o)
Is there a solution for Blackberry devices that can’t show flash?
I used this code and it worked great for Iphone but not on
older Blackberries..
Any help would be greatly appreaciated..
Cheers
This is a great option, but I have a question. How do you deal with users clicking a link on the mobile site to view main site? At the moment this would just end up re-directing them back to the mobile version
you need to duplicate the home page and remove the detection
Script from it and have the mobile users that wants to see the full site go to it.
This technique could be adapted to load an alternate stylesheet as well.
Hi! no one seem taking about this option, is there an example somewhre??
Thank you!
Hello,
I seem to have the script work on the android device, but on the iphone it goes to the same url of the android js. Has anyone else have this happen to them? It seems like the
Android code Is being read and the
User Agent code is not being read by iphone at all. Any ideas?
Thanks
Also just noticed that when i use firefoxes User Agent switcher that the iphone 3 works..i know its a firefox addon but does that mean iphone 4 has a different user agent?
I’m not a coder but I pretend to be. I found the script very useful for a project I had. Now I have something similar, but instead of redirecting all mobile devices to the same mobile site I need to redirect them different sites based on the mobile device’s os. An iPhone would go to an iPhone site and an Android would go to an Android site. Any help would be greatly appreciated.
thank you… great post!
awesome thanks! (you just ended a 5 hour headache!!) worked great!!!
This is a useful script. Does this work for most smart phones?
This is a good script too bad you only have it available for iphone/ipod. Please expand to blackberry and android, thank you!
I used the script above in my header.php file for my wordpress site and it is redirecting to my mobile site perfectly.
Now, exactly, how do I get the mobile users to go to the desktop version, if they want to, without it continuously looping back to mobile site? Alot of useful information from others is posted above, I am sure, but for someone as “green” as me, it isn;t helping because I do not know which file to change, etc.
What I need is a way to switch mobile users (m.mydomain.com) back to desktop site (mydomain.com), if they choose to, without it redirecting in a loop back to mobile site all the time.
Thank you for the help!!!
Hi,
I plan to use the wordpress/blog url of my website to easily create a mobile version of my dreamweaver website, using a plugin). Can I then type “/wordpress ” instead of “mobile.html” to redirect mobile users to the WP mobile site, as below?
<!–
if (screen.width
Hey all,
I’m utilizing the original script to run a mobile redirect and it works fabulously except I can’t figure out how to get it to redirect to a subdomain, rather than an html file in the main domain. The document location line doesn’t seem to work when the document is located in a subfolder (ie: mobile/index.html)
Help please? I’m assuming its a simple fix.
#notacoder
I’m attempting to utilize the following version of the script.
<!–
if (screen.width
Hi Mae, yes, directing it to /wordpress will work just fine.
Sorry to ask again, but I could really use the help…
I used the script above in my header.php file for my wordpress site and it is redirecting to my mobile site perfectly.
Now, exactly, how do I get the mobile users to go to the desktop version, if they want to, without it continuously looping back to mobile site? A lot of useful information from others is posted above, I am sure, but for someone as “green” as me, it isn’t helping because I do not know which file to change, etc.
What I need is a way to switch mobile users (m.mydomain.com) back to desktop site (mydomain.com), if they choose to, without it redirecting in a loop back to mobile site all the time.
Thank you for the help!!!
Hi you all.
This code doesn not work on my web site … or with my LG Android ….
Someone would please write some URLs where it is working properly, just to check …
Thanks
I think avoid Using browser javascript redirection for mobile website better to use a HTTP Server Redirection its better to avoid page loading time
thanks everyone, I had seen the code at http://detectmobilebrowsers.com/ but wasnt sure it was good, after reading this thread I tried it and it worked! I wanted my mobile peeps to be able to break out of the mobile site and see the full site if they wanted, and all other solutions either had them stuck on the mobile or I had to make everyone land on a page to make a choice between mobile and regular, including computer people. this was a great solution! Computers go to my full site, mobile people to to the mobile site, and I have links from one too so everyone can choose to go see the other version if they want…
Thanks, smart and simple!
One mistake not to make is to put the IF statement inside an a document load. The problem this caused was that if you were to use the back button on certain phones you would end up on the main site with no document.location change so the user can’t get back to the mobile.
Basically I added the code into the main site javascript file inside the document.load which caused this error. Then I removed the document.load wrap and everything was peachy.
Thanks! :D
Hi Mark,
You just described the problem I am trying to solve. Can you be a little more descriptive with how you solved it. I am a novice at best and am searching for an easy solution. Thanks!
Matt
Define easy :-D
So when a user lands on the desktop version I would run the above resolution IF statement in-line, so there is no “$(document).ready(function(” surrounding the code. So you would place the above code simply at the top of your webpage. or in your javascript file like this
But in my setup is is slightly different. Once the user is on the mobile sub domain I have used jquery.cookie.js to configure the rest of the process as sub domain to main domain cookie access is allowed but main domain to another main domain is not.
If a user would actually prefer to view desktop version they would click on “view desktop version” which would create a cookie with name:mobile value:off. Then be redirected to the desktop domain. The final check done on this domain would be another IF statement run inline checking if the cookie exists and has value “off”.
I have to stress that I would use responsive layouts if possible to save duplicating content/work load but this was not an option for the project I was doing.
Hi,
I’m using this to test a proof of concept I have it working for iPhone, Android and Windows Mobile. Has anyone figured out a blackberry solution?
Thanks,
Hello Joe
I was using the following script but not sure what models this works on (this was for a mobile site I built so long ago it was in tables!! :-P) so you will need to do some testing but you get the idea.
Will this work for pages that have been “iframed” by Facebook? I ask because, at this time, Facebook tabs (pages inside a facebook page) will not resolve on mobile devices. Each Facebook tab has a unique url. But when using a mobile device, Facebook redirects those urls to the facebook log in page; after the user logs in, a facebook “page not found” error is shown. I would like instead for the mobile user to be redirected out of facebook to a clone-ish page that would display. Anyone have any experience with this?
I tried this code in the head of my Genesis theme. I get “nothing found” when I Google it on my smartphone. (The mobile page worked when tested in the browser.) Any ideas?
What would the screen width be for a tablet device? I would like to redirect users from the desktop version to tablet.html. Thanks!
Great! Simply! Lots of thanxs
Didn’t work for me…my Droid Incredible reports that screen.width = 1024.
Too many geeks, no legitimate solution! Dip$3!t forum. 1-2-3- GO!
hi all, i’m new here…
please help me…
1) i have a maindomain ( newsct.com ) and a subdomain ( m.newsect.com)
2.) i’m using
A1) @import url(“screen.css”) screen;
A2) @import url(“mobile.css”) handheld;
A3) @import url(“print.css”) print;
to redirct css……
B) only one index page called (index.php)
3) Now i want my visitors can browse (mobile.css) via “subdomain” with desktop browser (like as m.facebook.com on desktop)
and visitors can browse (screen.css) via “maindomain” with mobile browser.
Thanks.
sorry for bad english.
Hi Ahmed,
You will need to use the javascript as mentioned in the second black box here. This javascript will need to be added to the webpage: newsct.com/index.php
You will need tp create another index.php with the mobile stylesheets linked and upload this to m.newsect.com/index.php.
For your information…..
(You are confusing yourself here. The media resolution quiries are so that your visitors do not get re-directed to your mobile sub domain. What these do is the stylesheet is simply included for the smaller screens. This method is not needed if you are re-directing your visitors to the mobile domain where you have another index page with just your mobile css file attached)
hi !Mark,
Thanks for helpful reply,
I’ll try that what you said…
works just fine :) very easy and very useful >>> thanks
I am using Nokia C7
Elegant solution using Javascript! Here’s an article which covers mobile detection and redirection using PHP… http://www.mlynn.org/2010/06/mobile-device-detection-and-redirection-with-php and one that I wrote covering Perl/CGI… http://www.mlynn.org/2010/07/mobile-device-detection-and-redirection-with-perl-and-cgi
Enjoy!
Mike
Please could you give an example for an alternate stylesheet
Thanks, the javaScript it works well, interesting concept checking for screen width, just a little worried that it might have to be updated in the near future as these mobile screens get better resolutions.
I am also a little worried about this. So far I think there is only one htc to be worried about. The way I was thinking of approaching this is if the device has a high resolution screen then treat it as such like a large screen device and show the desktop version of the site. Ideally responsive designs would take care of this issue but unfortunalty now all builds can use this.
not all builds*
Has anyone tried this code on .aspx?
I have been trying to find a script, without using .access file.
I have tried this code on my master file however it is not working.
Any Ideas would be much appreciated.
Thank You
Hi,
If you want one simple code to redirect to multi devices such as feature phones, smartphones, BB, iPhone, iPad, Tab, Kindle, PSP, Nintendo wii, you should go here :
https://github.com/sebarmeli/JS-Redirection-Mobile-Site/tree/3e42b4e5a93d5cf39dcd1339e947c89d45741a21
I use it and just meet what I want. A user comes from Google to my site : example[dot]com/page_1 will be redirected right to my mobile site : m.example[dot]com/page_1 etc
How I can switch the mobile version to view full website..? But i have this code on my index page..
There are a few ways, but I think a second “if” statement checking for where you’re coming from is the simplest… See my earlier comment for code (the 3rd attempt – I noobed the code-in-a-comment first 2 tries).
You dont have to use separate user agent matches. Just separate the user agenets with a “|”…. like this…
if ((navigator.userAgent.match(/iPhone|iPad|iPod|Windows Phone/i)))
…then you can put as many in there as you want without the script going on too long.
Hello,
Is there any reason why this simple code wouldn’t work? I’ve got it pasted as the first JavaScript in my index.html file. But it won’t seem to work.
Best regards,
Jeremy
Hi Jeremy, have you linked to jquery file and checked validation/firebug errors?
Just to let you all know I own the new Samsung Note and it works on a width of 800 so I’ve had to change my code to
Not sure that testing for resolution is accurate enough…
I found this native JS (not reliant on jQuery) code to be pretty bullet-proof :
var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase())); if (mobile) { window.location = "http://yourdomain.com/mobile.html" }Thank you! Thank you! Thank you!
As far as Ive tested this it work marvelously on android and apple devices.
In my opinion a better solution than the px width ones.
Can other mobile devices owners please test this code:
windows mobile
blackberry
palm
A question for you codemonkey, what do the tags “mini” and “\sce” mean?
Which devices do they target?
This code worked great for me, but is there a way to adapt it to allow for redirect back to full site from mobile site?
Can someone point me to an actual homepage that includes this code working so I can see the source in action and how it’s inserted? I can’t seem to get this working right. Thanks in advance.
thanks!!!! working perfect
If it only worked – but it doesn’t. You can set Safari Browser to view mobile sites and this redirect just does not work. The URL of PC sites with correct redirects give mobile page views correctly in Safari. It does not work!
This library is very good, for Mobile Detection and so simple to use..
http://mobiledetect.net/
This works like a charm. Thank you so much. :)
“<screen.width <= 699”
Wrong! You can no longer count on pixels <699 to tell you if a device is mobile, as 2012 phones have much higher resolution, yet the screens are still relatively small.
Even the iPad mini has 1024 pixels, so under this logic, it would not present the mobile site.
You have to test more than just number of pixels, folks!
Very useful and still very relevant. No device limitations and most should be able to handle the JS requirement just fine — thank you.
[ERROR SOLVED!]
The javascript code in this post by the author is fine except it didn’t work for me in the android phone. Then I yield a solution. Just replace “document.location” with “window.location” and your problem is solved. For your convenience, I’m adding the full script.
If you find it still not working, then please make sure your javascript syntax.
Ahhhh perfect, Thank you very much!!!! Was wondering why in the world wasn’t it working on the S3 !
This just flat out does not work! I’ve tried dozens of variations as of some of the comments here. Put the script in the header, after the title & before my css. I put the mobile.htm file in the same folder as my index.htm with the javascript, I resize the browser window and no redirect! Tried a couple of mobile emulators and still no redirect! Do you have to have some kind of .js file in your root directory too?
Nice code
It works
thanks a lot
Could someone tell me why this is not working 4 me? My index file (http://www.pianotuningnashville.com/test/index.htm) has the following code, just after the head tag:
<
script type=”text/javascript”>
if (screen.width <481) {
window.location = “http://www.pianotuningnashville.com/test/mobile.htm”
}
I reduce my screen in Firefox (also tried Explorer & Chrome) to less than 480 & it’s still the same page – no redirect. I have javascript enabled in all browsers. Why is this working 4 others & not 4 me? Am I doing something wrong? Help please.
trashcode:
That’s why it’s not working? How to set a cookie then? I’m more of a designer, not a developer. Not well versed in code. thanks.
Hello there, I try this with my Galaxy S3 and it does not work? Any solutions?
No one commented on how to adapt the code to redirect to an alternate CSS page. I really don’t want to construct a new site if one page will do.
@Bill you can use responsive CSS.
and how to make menu “Full Site”?
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
// some code..
}
This IF seems to work great for me:
Tested on Apple iPhone 4S, Samsung Galaxy S3, Google Nexus 7
Excellent. This is one of the best mobile redirect scripts I found that works well. My old script stopped working rescently for some reason. Thanks for sharing!
Not all wordpress sites look good on a mobile phone. What if I didn’t want to get a mobile ready theme but I wanted to do this for my wordpress site. Where would I put the suggested code. What file?
<!–
if (screen.width
Here’s script.
if(navigator.appVersion.indexOf(“Win”)!=-1)
{
location.href = “#”;
}
else if(navigator.appVersion.indexOf(“Mac”)!=-1)
{
location.href = “http://example.com”;
}
else if(navigator.appVersion.indexOf(“Linux”)!=-1)
{
location.href = “http://example.com”;;
}
i want to use it as onclick function. Actually i have software site. when user click on download and then page auto redirect according to user operating system. If user OS is MAC and then redirect MAC page, if Windows and then redirect to Windows. Thanks
Works like a little charm :)
<?php
$iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$android = strpos($_SERVER['HTTP_USER_AGENT'],"Android");
$palmpre = strpos($_SERVER['HTTP_USER_AGENT'],"webOS");
$berry = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry");
$ipod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod");
$wmobile = strpos($_SERVER['HTTP_USER_AGENT'],"Mobile");
$opera = strpos($_SERVER['HTTP_USER_AGENT'],"Opera Mini");
if ($iphone || $android || $palmpre || $ipod || $berry || $wmobile || $opera == true)
{
header('Location: http://www.xxxxxx.xx/indexmobile.html');
echo "window.location=’http://www.xxxx.xx/indexmobile.html'”;
}
?>
put it before in .php file. see it working : http://www.112pc.ro . Try it on a very old phone :) .Still works.
user_agent.php
<?php
$iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$android = strpos($_SERVER['HTTP_USER_AGENT'],"Android");
$palmpre = strpos($_SERVER['HTTP_USER_AGENT'],"webOS");
$berry = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry");
$ipod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod");
if ($iphone || $android || $palmpre || $ipod || $berry == true)
{
header('Location: http://mobile.site.com/');
//OR
echo "window.location=’http://mobile.site.com'”;
}
?>
and in ur index.php or home.php
Just the code I was looking for. Straight forward and simple. Thanks a bunch!
What if I want to restrict people from being able to visit the mobile site from a desktop browser? Is there an ‘statement’ that can be tacked on that would take care of that?
Here is a plugin solution for wordpress – http://www.ultimate-wordpress-mobile-redirect.com
This plugin allows you to set a unique redirect URL for every page and/or post on your website. This way when a visitor clicks a link… they are sent to the correct mobile version and not just the home page.
Thank you for this simple html code ! Love it.
I suppose I have to add and edit this script for all my website pages. Right ? It looks like if I use google search and let’s say google returns: mywebsite.com/contact/contact.html and somebody clicks on it, it will go to the computer website, not to the mobile site…
Also, I was wondering is there a seo problem because I have two sites: one for computer and other one for mobile devices but it means the content is duplicate. Is this script resolves the problem of duplicate contents for google robot ??? Is it safe to use it. Thank for trying answering (it’s quite an important question for me…) and excuse my poor english.
Hello !
I want use script code:
if (screen.width <= 699) {
document.location = "mobile.html";
}
Redirect OK, but It’s reload, reload,…
Help me, please !
Thanks!
How about NO? Let some of us users have the option to view the desktop version? Most mobile sites are useless!
i have a mobile version which is (www.domainname.mobi) and the desktop version (www.desktop.com).
both websites have a same urls for example if you will open desktop version (www.desktop.com/albums/taylor-swift.html) and a same url on mobile version (www.domainname.mobi/albums/taylor-swift.html). but the problem is i have all my website static and its very old website i have more then 10k static pages. will i go every page and add the code ? is there any solution to add some .htaccess codes and it works and redirect same to same but change .com to .mobi
note: i have different directories aswell on server for examples.
http://www.desktop.com/albums/taylor-swift.html
http://www.desktop.com/track/rihanna.html
http://www.desktop.com/video/taylor-swift-just-like that.html
any one please help me to redirect .com (desktop version) to .mobi mobile version ?? i just need to redirect mobile traffic.
i tried .htaccess but when ever i open different url for example open a url http://www.desktop.com/albums/taylor-swift.html it is opening : http://www.desktop.mobi/albums/index.php how do i open http://www.desktop.mobi/albums/taylor-swift.html
This works a treat. Thanks!!!
How would you do it for Android?
while(true)alert(“hola”)
Really thankful for such a concise code
Hello,
I have tried many different things in my HTACCESS file with the goal of removing the html file extensions and adding a trailing slash at the end.
However, I keep running into this problem:
Either the trailing slash is added, but then for some reason the menu button (#menu) on my website when on a mobile device does not work anymore.
OR: the trailing slash is not added in which case the menu button on my website when opened on a mobile device still works.
But I can’t seem to get both the trailing slash and the menu button to work.
Any help would be appreciated.
thanks,
Lars
Great Work…. but i want to know how to redirect in wordpress?
my site is GUPSHUP CORNER
Try SOGO Add Script Header Footer !
Phew great thanks. I used this with the WordPress Plugin SOGO Add Script Header Footer
What about Android mobiles? How do you call them?
??? navigator.userAgent.match(/Android/i) ?????
Hi, in this way Google index the mobile version of website.
Any solution?
Hi.
Thank’s for your info.
Hope I can ask:
I assume I can use both scripts on index.htm?
And, where do I paste the script’s? Inside head tags?
20 years since l made my last site…:)
Best wishes
Vegard
Can you create exceptions sample, please?