My .htaccess file is writing a "smart" cookie. If my page reads this cookie it will write a div. Then my mobile CSS file loads only if the user's on an iPhone or iPod.
My question is, how can I edit this code (below) to load the mobile CSS file if the user's on an Android?
Here's my page and code:
<meta name="viewport" content="width=device-width, user-scalable=yes" />
<link rel="stylesheet" type="text/css" href="css/mobile.css" media="only screen and (max-width: 640px)" />
<script type="text/javascript">
if (window.screen.width > 640){document.write('<meta name="viewport" content="width=980, user-scalable=yes" />')}
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))){document.write('<link rel="stylesheet" type="text/css" href="css/mobile.css" media="only screen and (max-width: 640px)" />')}
</script>
You should just be able to add
|| (navigator.userAgent.match(/Android/i))
to the second if statement, so
if( (navigator.userAgent.match(/iPhone/i)) ||
(navigator.userAgent.match(/iPod/i)) ||
(navigator.userAgent.match(/Android/i)) )
Here you goes :)
http://davidwalsh.name/detect-android
This snippet will do it:
navigator.userAgent.match(/android/)
Related
I have html page that loads different css, depending on screen width (targeting pc, tablets and phones):
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" >
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1200px)" href="css/desktop-style.css" >
<link rel="stylesheet" type="text/css" media="screen and (min-width: 769px) and (max-width: 1199px)" href="css/tablet-style.css" >
<link rel="stylesheet" type="text/css" media="screen and (min-width: 100px) and (max-width: 768px)" href="css/phone-style.css" >
I heavily depend on jQuery, and functions should be chosen depending on active css. Is there a way in JavaScript of jQuery to determinate which css is active?
Or should I use jQuery to determinate browser width, and make further functions depending on width output?
Thank you.
You can check if this thread helps.
You can also think of using media queries inside a css file and load the same file for different screen variants.
I recommend you to use media query but if you want a JavaScript solution, can do this with jQuery like this:
var window = $(window).width();
var css = $('#css');
if(window > 100 && window < 768){
css.attr('href','css/desktop-style.css')
} else if(window > 769 && window < 1199){
css.attr('href','css/tablet-style.css')
} else if(window > 1200){
css.attr('href','css/phone-style.css')
}
<link id="css" rel="stylesheet" type="text/css" href="css/style.css" >
Note: You can change resolutions as you want, I'm not sure it's correct for detect mobile tablet or etc.
Warning: Be aware! this method a little bad for SEO things, google and etc not read your responsive styles.
It is probably wiser to check the widh of the device. But I think you could figure out which css is used, by this little 'hack'. In each css you give a nonsense property to a hidden element.
In the example I gave #canary the animation name first-css.
In a different css file you could write
#canary {animation-name: second-css; display: none}
You could give a unique property to a certain element in each css file. JQuery could check that property.
$(function() {
whichcss=$("#canary").css("animation-name");
$("#output").text(whichcss);
})
#canary {animation-name: first-css; display: none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="canary"></p>
<p id="output"></p>
To be extra clear. In your css files you should include th name of the css file in this way:
in desktop-style.css:
#canary {animation-name: desktop-css; display: none}
in tablet-style.css:
#canary {animation-name: tablet-css; display: none}
in phone-style.css:
#canary {animation-name: phone-css; display: none}
I have a responsive site designed with twitter bootstrap that works fine on desktop, but not so much on mobile (tested on 2 different Android devices in Chrome and Samsung browser, and an iPhone in safari).
What works - Mobile
If I type in the url with an additional page (other than index.html), i.e. seniorcareplacementchoices.com/learn.html it loads just fine.
What doesn't work - Mobile
If I type in the url itself - seniorcareplacementchoices.com (with or without www or http://) it loads for about .2 secs then goes to www.google.com.
seniorcareplacementchoices.com/index.html does not work either.
The only real difference between index.html and the others such as partners.html is that I added a bootstrap carousel to the index.html.
I am using site44 for hosting.
I think the problem is either:
a) The carousel is not responsive and messes up the mobile interpretation of the site
b) Something to do with google's new ssl rule (haven't looked much into it)
Any ideas?
NOTE: Yes I do have the line
<meta name="viewport" content="width=device-width, initial-scale=1.0">
CODE
index.html
<head>
<title>Senior Care Choices</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" rel="stylesheet">
<link href="css/neat-purple.css" rel="stylesheet" media="screen" id="neat-stylesheet">
<link href="libs/lightbox/css/lightbox.css" rel="stylesheet" type="text/css">
<link rel="icon"
type="image/ico"
href="../img/favicon.ico">
<!--New Stylesheets and scripts for CAROUSEL -->
<link href="../../dist/css/bootstrap.css" rel="stylesheet">
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
<!-- Custom styles for this template -->
<link href="./css/carousel.css" rel="stylesheet">
<script src="./js/carousel.js"></script>
<!--end new stylesheets for carousel -->
<!-- Use google font -->
<link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700,300italic,400italic,700italic|Lustria" rel="stylesheet" type="text/css" />
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
learn.html
<head>
<title>Senior Care Choices</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="css/neat-purple.css" rel="stylesheet" media="screen" id="neat-stylesheet">
<link href="libs/lightbox/css/lightbox.css" rel="stylesheet" type="text/css">
<link rel="icon"
type="image/ico"
href="../img/favicon.ico">
<!-- Use google font -->
<link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700,300italic,400italic,700italic|Lustria" rel="stylesheet" type="text/css" />
</head>
this would be your culprit:
(function() {
'use strict';
var isMobile = function () {
if(window.innerWidth <= 800 && window.innerHeight <= 600) {
return true;
} else {
return false;
}
};
var redirectToMobile = function () {
if (isMobile()) {
window.location.href = "http://google.com";
}
};
redirectToMobile();
})();
Embedded in your "Confidence: START" area. Looks like a copy paste fail ;)
Curiously enough if you have a large (5"+) phone, this doesn't fire. My Nexus 5 didn't trigger this condition because the innerHeight was 640.
This question already has answers here:
Using Media Queries To Only Include JS Files On Mobile
(3 answers)
Closed 8 years ago.
I'd like to know how to import a specific JS script for my mobile device...
Something like this :
</html>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<link href="stylesheets/bottom.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="components/normalize-css/normalize.css">
<link href="stylesheets/app.css" media="screen, projection" rel="stylesheet" type="text/css" />
</head>
<body>
// Only for media screen and (max-width : 500px)
<script src="modile.js"></script>
</body>
</html>
You can do something like this:
<script>
if (window.screen.width <= 560) {
// load the script you need
} else {
// load another script
}
</script>
You can load scripts using jQuery getScript for example;
I cannot find info anywhere on exactly how to setup respond.js.
I unzipped into htdocs - is this correct? Or do I just need respond.min.js in htdocs?
Then simply reference the file like this...
<script src="respond.min.js"></script>
Currently, I have this in my head section, have tried before and after my media queries, yet NO stylesheet is used.
Is there a tutorial anyhwere on exactly how to set up resonse.js, as I have no idea if I am doing something wrong or whether there is another problem.
Any help would be much appreciated, my site is FINALLY finished yet I don;t want it to go live without media queries and currently if I use media queries, no stylseheet is loaded at all in IE8.
Thanks
This is my current code;
<!DOCTYPE HTML>
<html lang="en">
<head>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://localhost/respond.min.js"></script>
<![endif]-->
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" media="screen and (min-device-width:600px) and (max-device-width:1024px)" href="http://localhost/oldScreen.css">
<link type="text/css" rel="stylesheet" media="screen and (min-device-width:1025px)" href="http://localhost/home.css">
<title>Eastbourne Netball League[Home] </title>
</head>
Alright, since the file is loaded, the problem has to come from one of these 2 points:
From the documentation:
Craft your CSS with min/max-width media queries to adapt your layout from mobile (first) all the way up to desktop
#media screen and (min-width: 480px){
...styles for 480px and up go here
}
Reference the respond.min.js script (1kb min/gzipped) after all of your CSS (the earlier it runs, the greater chance IE users will not see a flash of un-media'd content)
My guess is the second point :)
I hope it helps.
[edit]
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" media="screen and (min-width:600px) and (max-width:1024px)" href="http://localhost/oldScreen.css">
<link type="text/css" rel="stylesheet" media="screen and (min-width:1025px)" href="http://localhost/home.css">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://localhost/respond.min.js"></script>
<![endif]-->
<title>Eastbourne Netball League[Home] </title>
</head>
If this doesn't work, put it this way inside your CSS file:
#media {min-width:600px) and (max-width:1024px) {
/* your css here */
}
#media {min-width:1025px) {
/* your css here */
}
Therefore, you can even put all your CSS in the same file
When checking my site on a mobile device (iPhone) it is clear that it is still loading the non mobile stylesheet. Here is the code in the header, can someone tell me whats wrong?
<link rel="stylesheet" href="styles.css" type="text/css" /> <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="styles_mobile.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script src="js/onclick.js" type="text/javascript"></script>
<script>
if (screen && screen.width > 480)
document.write('<script type="text/javascript" src="js/jqFancyTransitions.js"><\/script>');
</script>
Any reason why this is not using the "styles_mobile.css" as is intended?
In any response please be aware that I have limited knowledge of javascript
I think it needs a meta viewport tag:
http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html
This means use the device width, not the width that the browser in the device reports, which is bigger.
Technically, to do media queries by the book you need to add a "media" attribute to the element, or add #media entries to your CSS.