0

I'm trying to make a different usage of my stylesheets depending if the device is mobile or not. I would like that my javascript could compare the height and the weight of browser. I have tried this, but it doesn't work:

    <script type="text/javascript">
function applyStyle() {
var $ = document; // shortcut
var mobile = 'mobile';  // you could encode the css path itself to generate id..
var desktop = 'desktop';  // you could encode the css path itself to generate id..
    if ($(window).height() > $(window).width()) {
    var head  = $.getElementsByTagName('head')[0];
    var link  = $.createElement('link');
    link.id   = mobile;
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = 'css/interfacemobile.css';
    head.appendChild(link);
}
else {
    var head  = $.getElementsByTagName('head')[0];
    var link  = $.createElement('link');
    link.id   = desktop;
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = 'css/interface.css';
    head.appendChild(link);
}}
</script>

</head>

<body>
<script type="text/javascript">
    applyStyle();
    </script>

I think that my error is on calling of script, but I'm not sure because I'm not very skilled with JS. Thank you very much for the help!

Edit: Now I'm Trying this:

<script type="text/javascript">
function checkStyle() {
var check = false;
(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
return check; 
}
</script>
<script type="text/javascript">
function applyStyle() {
    if (checkStyle()) {
    var head  = $.getElementsByTagName('head')[0];
    var link  = $.createElement('link');
    link.id   = mobile;
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = 'css/interfacemobile.css';
    head.appendChild(link);
}
else {
    var head  = $.getElementsByTagName('head')[0];
    var link  = $.createElement('link');
    link.id   = desktop;
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = 'css/interface.css';
    head.appendChild(link);
}
}
</script>
</head>

<body>
<script type="text/javascript">
    applyStyle();
    </script>

But it doesn't work, why? TT_TT

Edit: The solution for me has been: 

<script type="text/javascript">
function isMobile() {
var check = false;
(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
return check; 
}
</script>
<script type="text/javascript">
var $ = document; // shortcut
var mobile = 'mobile';  // you could encode the css path itself to generate id..
var desktop = 'desktop';  // you could encode the css path itself to generate id..
function applyStyle() {
    if (isMobile()) {
    var head  = $.getElementsByTagName('head')[0];
    var link  = $.createElement('link');
    link.id   = mobile;
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = 'css/interfacemobile.css';
    head.appendChild(link);
}
else {
    var head  = $.getElementsByTagName('head')[0];
    var link  = $.createElement('link');
    link.id   = desktop;
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = 'css/interface.css';
    head.appendChild(link);
}
}
</script>
</head>

<body>
<script type="text/javascript">
    applyStyle();
    </script>

Thank you all!

Improve this question
2
  • 1
    Did you look at your browser's JavaScript console at all? Try pressing 'F12', it might help you see what's going wrong. Commented May 26, 2014 at 22:31
  • 1
    Now you remove the var $ = ducment so you should change also all the $ for document. Also... use chrome for debugging and open the Developers Tools... F12 or contextmenu > Inspect Element like David Thomas said Commented May 26, 2014 at 23:15

2 Answers 2

Reset to default
3

The error is in 

var $ = document; // shortcut

and then

if ($(window).height() > $(window).width()) {

$ is document and you are using it like jQuery

use window.innerHeight window.innerWidth

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

it works, but if I load the page from a mobile device on landscape mode it loads "desktop" stylesheet. Can js recognize if the device is mobile or not?
can and can't... there is several ways to do it... check http://stackoverflow.com/questions/11381673/javascript-solution-to-detect-mobile-browser also search in google the <meta viewport=""> tag and media queries
I've solved with the script in your link! Goodjob my frind, thank you so much!
2

You can just use CSS media queries:

<link rel="stylesheet" media="screen and (min-device-width: 700px)" href="css/narrow.css" />
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
<link rel="stylesheet" media="screen and (max-device-width: 901px)" href="css/narrow.css" />

OR, if you really want to use javascript, you can use this:

function adjustStyle(width) {
    width = parseInt(width);
    if (width < 701) {
        $("#size-stylesheet").attr("href", "css/narrow.css");
    } else if ((width >= 701) && (width < 900)) {
        $("#size-stylesheet").attr("href", "css/medium.css");
    } else {
       $("#size-stylesheet").attr("href", "css/wide.css"); 
    }
}

$(function() {
    adjustStyle($(this).width());
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});
Improve this answer

4 Comments

I need an universal manner for recognize all the resolutions. Usually mobile devices have the height > width!
You're question said depending on browser width, so I answered as such. I'm sure what I have posted can be modified to work for height also.
Of course, it works also for height. I intended that my stylesheets doesn't depending from a specified dimension, but also if height>width!
Ah, I get you. You can also do that with this also. Use the Javascript i've got, also get the height and do an if (width<height) { $("#size-stylesheet").attr("href", "css/narrow.css");}

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.