Как часто вы мучились при верстке с разными разрешениями мониторов? Я частенько, особенно когда макеты под все типы мониторов выглядела одинаково. В конце концов мне это надоело и с помощью гугла который мне выдал кучу маленьких недоделанных скриптов и Bosh’и который помог доделать их я решил эту проблему.
Подробности далее…
ВНИМАНИЕ.
Содержимое данной статьи морально устарело но сохранено для академических целей.
Итак, целью скрипта является загрузка разных css для мониторов размером равным или меньшим 1024*768 и всех остальных кто больше. Для начала просто протестируем:
<script type="text/javascript">
if (self.screen)
{
width = window.innerWidth
}
else if (self.java)
{
var jkit = java.awt.Toolkit.getDefaultToolkit();
var scrsize = jkit.getScreenSize();
width = scrsize.width;
}
if (width <= '1025') {
document.writeln ("<h1>Загружаем под 1024</h1>");
} else {
document.writeln ("<h1>Загружаем под > 1024</h1>");
}
</script>
<noscript>
<h1>Вебмастер шоке! У тебя не работает js, как так?!?! </h1>
</noscript>Итак теперь нам выводится сообщение что надо грузить, теперь просто переносим все это в и добавить ссылки на css файлы
<head>
<script type="text/javascript">
if (self.screen)
{
width = window.innerWidth
}
else if (self.java)
{
var jkit = java.awt.Toolkit.getDefaultToolkit();
var scrsize = jkit.getScreenSize();
width = scrsize.width;
}
if (width <= '1025') {
document.writeln ('<link rel="stylesheet" type="text/css" href="1024.css" media="all" />');
} else {
document.writeln ('<link rel="stylesheet" type="text/css" href="wide.css" media="all" />');
}
</script>
<noscript>
<link rel="stylesheet" type="text/css" href="1024.css" media="all" />
</noscript>
</head>Теперь у нас загружаются разные стили, ура!
Добавить комментарий