| |
|
|
| | Я понял,что пришло время придумывать что-то со шрифтами, чтобы они читались на новых мониторах. Хотя я не профессионал, но вот что-то пришло в голову - хочу поделиться.
Кому-то это пригодится, а кто-то подскажет как можно сделать ещё лучше.
Основная идея в том, чтобы 1)узнав размер шрифта, 2)подправить размер корневого элемента, а 3)остальные размеры отсчитывать от размера этого корневого элемента
Вторая задача решается оченьпросто: body{ font-size: <?php echo $em; ?>%;}
Третья естественно будет решена, если размеры указывать в относительных единицах em
В итоге:
Вот что я добавил в header:
<? // Блок определения базового размера шрифта
$em = 1;
if(isset($_COOKIE['screenWidth']) and $_COOKIE['screenWidth'] > 100 and $_COOKIE['screenWidth'] < 100000) {
$etalon = 1152;
$em = ($_COOKIE['screenWidth']/1152 + 1)/2;
if($em > 3 )$em = 3;
if($em < 0.3 )$em = 0.3;
$em *=100.01;
}
?>
<style>
body{ font-size: <?php echo $em; ?>%;}
</style>
<script type="text/javascript" src="../jscripts/screen.js"></script>
|
A файл screen.js вот:
var height=0;
var width=0;
var exp = new Date( );
var nowPlusOneWeek = exp.getTime( ) + (7 * 24 * 60 * 60 * 1000);
exp.setTime(nowPlusOneWeek);
if (self.screen)
{
width = screen.width
height = screen.height
}
else if (self.java)
{
var jToolKit = java.awt.Toolkit.getDefaultToolkit();
var scrsize = jToolKit.getScreenSize();
width = scrsize.width;
height = scrsize.height;
}
if (width > 0 )
{
document.cookie = "screenWidth=" + width + ";expires=" + exp.toGMTString( ) + ";path=/";
}
if (height > 0)
{
document.cookie = "screenHeight=" + height + ";expires=" + exp.toGMTString( ) + ";path=/";
}
|
На всякий случай решил записывать и высоту экрана, вдруг другая формула придумается...
Надо ещё сказать, у меня нет возможности протестировать на большом количестве разных экранов, поэтому я не вполне уверен, что формула наилучшая.
Протестируйте, пожалуста!
Внесите поправки. | |
| |
|
|
| |
|
|
| |
для: Eugene77
(12.01.2009 в 15:51)
| | | на иностранных сайтах достаточно распространены переключатели с возможностью выбора размера своими силами. напиример - http://www.deltatangobravo.com/images/zoom/
а вот тут отталкиваются от ширины экрана http://www.alistapart.com/articles/switchymclayout | |
| |
|
|
| |
|
|
| |
для: AlexSol
(12.01.2009 в 16:46)
| | | Да,интересно!
http://www.deltatangobravo.com/images/zoom/ - отлично работает, но грузить 3 стилевых таблицы (тем более у меня они большие) не очень хочется. У нас ведь в России всё ещё многие в Интернете через GPRS.
http://www.alistapart.com/articles/switchymclayout - это у меня на Опере глючит. Текст один на другой налезает.
И непонятно как-то всё...
Вот это, например, что значит:
<link rel="alternate"
Буду ещё смотреть, может, что-то пойму.
Но в идеале, конечно, хотелось бы просто функцию пропорционального изменения размера всех шрифтов в документе, которую можно было бы вызывать, другой функцией, учитывающей куки, screen итд.
Или можно просто в скрипте писать:
document.body.style.font = 140%;
будет это везде работать?
Сейчас испытаю. Спасибо, что навели на идею! | |
| |
|
|
| |
|
|
| |
для: Eugene77
(13.01.2009 в 08:47)
| | | document.body.style.fontSize = 140%;
:) | |
| |
|
|
| |
|
|
| |
для: sl1p
(13.01.2009 в 09:11)
| | | >document.body.style.fontSize = 140%;
>:)
Это верно, конечно же, но что-то не получается...
<script>
window.onload=function(e){
document.body.style.fontSize = 400%;
</script>
|
Не работает. | |
| |
|
|
