I have been using javascript and css together with Mysite/Code/Page.php and comes up with bugs because of typography.css and form.css.
I am trying to intergrate the following javascript and think it would be better to change theme depending on screen resolution:
$(document).ready(function() {
if ((screen.width>=1024) && (screen.height>=768) && (screen.colorDepth>12))
{
$("link[rel=stylesheet]:not(:first)").attr({href : "themes/??template??/css/HighQ_Large.css"});
}
if ((screen.width>=1024) && (screen.height>=768) && (screen.colorDepth<=12))
{
$("link[rel=stylesheet]:not(:first)").attr({href : "themes/??template??/css/LowQ_Large.css"});
}
if ((screen.width<=1024) && (screen.height<=768) && (screen.colorDepth>12))
{
$("link[rel=stylesheet]:not(:first)").attr({href : "themes/??template??/css/HighQ_Small.css"});
}
if ((screen.width<=1024) && (screen.height<=768) && (screen.colorDepth<=12))
{
$("link[rel=stylesheet]:not(:first)").attr({href : "themes/??template??/css/LowQ_Small.css"});
}
else
{
$("link[rel=stylesheet]:not(:first)").attr({href : "themes/??template??/css/HighQ_Large.css"});
}
});