Как мне настроить условие if / or, чтобы мой дизайн менялся в зависимости от размера шрифта браузера пользователя? - PullRequest
Новая
       15

Как мне настроить условие if / or, чтобы мой дизайн менялся в зависимости от размера шрифта браузера пользователя?

3 голосов
/ 14 сентября 2010

Ответы: как можно буквально определить масштаб шрифта пользователя, чтобы его можно было использовать в качестве переменной?

Я пытаюсь создать некоторые операторы if / else на основе масштабирования шрифта пользователя (не масштабирования браузера), чтобы повысить удобство использования моих сайтов.

Два приведенных ответа являются обходными путями для одного случая (описанный сценарий). Сценарий, который я первоначально представил, был не лучшим выбором с моей стороны. Тем не менее, его можно использовать, и это самый простой для понимания сценарий, который я мог придумать на лету.

"Если размер шрифта изменяется, значение свойств offsetWidth / Height элементов, которые либо имеют размер по отношению к их текстовому содержимому, либо размер CSS с единицами измерения размера шрифта (em, ex и т. Д.), Изменится."

Я пытаюсь найти способ, чтобы основать свой макет / CSS на основе размера шрифта, установленного пользователем в настройках браузера. Например, в Chrome, если пользователь установил свой основной размер шрифта 24 -

Chrome: «Ключ»> «Параметры»> «Под капотом»> «Изменить настройки шрифта и языка»> «Шрифты и кодировка»> Шрифт с засечками> «Изменить»> Размер шрифта = «24».

-

Как я могу забрать событие? Работая с примером ... допустим, у меня есть несколько DIV с установленной высотой, 60 пикселей: 

<div class="dwarfer" style="height: 60px;">Whoa?</div>

Размер шрифта по умолчанию - 9 пт. Если пользователь устанавливает размер шрифта 24 пт (не очень высокий для человека с нарушениями зрения), нажатие клавиши ctrl + «mousewheeling down» до минимального размера шрифта может не вызвать раскрытие текста. Итак, лучше всего отрегулировать высоту с помощью переменной: 

$divheight = 5px/1em

Если вы знаете, что это за событие или как его найти, найдите это событие. Затем, пожалуйста, создайте пример в PHP, который использует $ divheight для регулировки высоты на основе выбранного пользователем размера шрифта браузера.

Самое близкое решение, которое я нашел для обнаружения изменений шрифта: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" » "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
<head>
  <meta http-equiv="Content-Type" content="text/html; » charset=utf-8"> 
  <title>Font Resizer Demo</title>
  <script type="text/javascript" src=" » textresizedetector.js"></script>
</head>
<body>
  <h1>Resize me, now!</h1>
</body>
</html>

И 

<script type="text/javascript" » src="textresizedetector.js"></script>
<script type="text/javascript">
  // <![CDATA[
  /* id of element to check for and insert test SPAN into */
  TextResizeDetector.TARGET_ELEMENT_ID = 'header';
  /* function to call once TextResizeDetector was initialized */
  TextResizeDetector.USER_INIT_FUNC = init;
  // ]]>
</script>

Как видно и обучено на http://www.alistapart.com/articles/fontresizing/.

Даже при использовании этого кода у меня возникают проблемы с включением $ divheight непосредственно в мой файл CSS: 

/* CSS */
<?php
  //variables
  $divheight = 5px/1em
  //end variables

  //styles
  echo '.dwarfer{' . "\n" . 'height:' . $divheight; . "\n" . '}'
  //end styles
?>

Комментарии к кодам приветствуются! Спасибо!

Ответы [ 2 ]

3 голосов
/ 14 сентября 2010

Не используйте фиксированные CSS-единицы, такие как px и pt. Используйте em или ex. 

em  1em is equal to the current font size. 2em means 2 times the size of the current font.
      E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em'
      is a very useful unit in CSS, since it can adapt automatically to the font that the
      reader uses

ex  one ex is the x-height of a font (x-height is usually about half the font-size)
1 голос
/ 14 сентября 2010

использовать единицы em вместо px. em относится к текущему размеру шрифта, поэтому, чтобы сделать то, что вы пытаетесь сделать, просто измените ваш div на что-то вроде этого: 

<div class="dwarfer" style="height: 1.2em;line-height:1.2em;">Whoa?</div>

JavaScript не требуется. Этот div всегда будет достаточно высоким, чтобы вместить одну строку текста - когда шрифт станет больше, div станет выше, чтобы вместить его, а когда шрифт станет меньше, div станет меньше.

Я думаю, это то, что вы ищете.

Немного дополнительной информации об устройстве em:

Вы можете использовать em практически везде, где бы вы использовали px. Это включает в себя правило font-size. Итак: 

<div style="font-size: 2em;">Twice as big</div>

Текст, содержащийся в этом div, будет в два раза больше текста его родителя.

...