I want to have 2 different css files, one for a window.devicePixelRatio <= 1 and one >1 for high dpi devices.
How can I use JavaScript to choose the css?
What I've done so far (not working):
<head>
<script>
if (window.devicePixelRatio <= 1) {
<!--alert('window.devicePixelRatio = ' + window.devicePixelRatio);-->
<link href="style.css" rel="stylesheet" type="text/css" />;
} else {
<link href="stylemobi.css" rel="stylesheet" type="text/css" />;
}
</script>
</head>Use one link tag and give it an ID and right after it put a script to set it's href
<link id="main-style" rel=...>
<script>
var stylesheet = window.devicePixelRatio <= 1 :'styles.css' : 'stylemobi.css';
document.getElementById('main-style').setAttribute('href',stylesheet );
</script>
Waiting any later to do it will mean some strange styling while the body loads
I'm not quite certain but how about,
<head>
<link id="theCSS" href="" rel="stylesheet" type="text/css" />
<script>
if (window.devicePixelRatio <= 1) {
document.getElementById('theCSS').href= "style.css";
} else {
document.getElementById('theCSS').href= "stylemobi.css";
}
</script>
</head>
Update:- Adding description--> Provided an id to the css <link> element and grabbing it in js using, document.getElementById() and assigning it'd href to whatever the css you want as per your condition
Don't use JS at all, just add some media attributes to the <link> elements to check the resolution:
<link href="style.css" rel="stylesheet" media="resolution <= 1dppx" />
<link href="stylemobi.css" rel="stylesheet" media="resolution > 1dppx" />
Otherwise, if you want to use JavaScript, you'll have to write valid JavaScript. You can't just mix and match JS and HTML.
Thanks for the answers! I used this method now, different css styles in a single css file, automatically choosen depending on the display ppi.
body {
margin: 0;
padding: 0;
/*background-color:#008B09;*/
background-image:url("purty_wood.jpg");
background-color:#008B09;
font-family: 'ABeeZee', sans-serif;
color:#000000;
overflow:auto;
font-size:1.2em;
}
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
body {
font-size:2em;
}
}
In this case the Browser overrides automatically the standard css, if the resolution is over 192ppi or the dp-ratio is over 2. So within a single css file, i can have different settings for different displays!
(i just need to set the resolution to min 235, because some mac displays have up to 230 ppi, most smartphones have at least 250ppi.)
More Info: https://css-tricks.com/snippets/css/retina-display-media-query/
