Спасибо за быстрый ответ! Идея решения понятная, а вот реализация не совсем. Вот что наваял, глюки те же, а может даже и больше:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Demo</title>
<link id="cssStyle" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function loadfirst() {
$("#cssStyle").remove();
var css_link = $("<link>", {id: "cssStyle", rel: "stylesheet", type: "text/css", href: "1.css"});
css_link.appendTo("head");
alert($(".some").width());
}
function loadsecond() {
$("#cssStyle").remove();
var css_link = $("<link>", {id: "cssStyle", rel: "stylesheet", type: "text/css", href: "2.css"});
css_link.appendTo("head");
alert($(".some").width());
}
window.onorientationchange = function() {
var ww = $(window).width();
var wh = $(window).height();
if(ww>wh) {alert("landscape");loadsecond()}
else {alert("portraite");loadfirst()};
return false;
}
</script>
</head>
<body>
<a href="#" onclick="loadfirst();">First css load</a>
<a href="#" onclick="loadsecond();">Second css load</a>
<div class="some"></div>
</body>
</html>