如何设置 if/or 条件，以便我的设计根据用户浏览器的字体大小进行更改？
回答者：如何从字面上检测用户的字体比例，以便将其用作变量？
我正在尝试根据用户的字体缩放（而不是浏览器缩放）创建一些 if/else 语句，以扩展我的网站的可用性。
给出的两个答案是针对单个案例（所描述的场景）的解决方法。我最初提出的场景并不是我的最佳选择。尽管如此，它还是可用的，而且这是我能即时想到的最容易理解的场景。
“如果字体大小发生变化，则元素的 offsetWidth/Height 属性值将发生变化，这些元素的大小要么与其文本内容相关，要么根据与字体大小相关的单位（em、ex 等）确定 CSS 大小。”
我试图找到一种方法，使我的布局/CSS 基于字体大小，由用户在他或她的浏览器设置中设置。例如，在 Chrome 中，如果用户将其主要字体大小设置为 24 -
Chrome：“扳手”>“选项”>“底层”>“更改字体和语言设置”>“字体和编码”>衬线字体>“更改”>字体大小=“24”。
--
如何领取活动？使用示例...，假设我有一些设置高度为 60px 的 DIV：
<div class="dwarfer" style="height: 60px;">Whoa?</div>
默认字体大小为 9 pt。如果用户将其字体大小设置为 24 pt（对于视力受损的人来说不是很高），则 ctrl+“鼠标滚轮向下”至最小字体大小可能不会导致文本显示。因此，最好通过变量来调整高度：
$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
?>
非常感谢代码注释！谢谢你！
Answerers: How does one literally detect the user's font scale, so that it may be used as a variable?
I am trying to create some if/else statements based on the user's font scaling (not browser zooming), to extend the usability of my sites.
The two given answers are workarounds for a single case (the scenario described). The scenario I initially presented was not the best selection on my part. Still, it is usable, and it's the easiest-to-understand scenario I could come up with on the fly.
"If the font size is changed the value of the offsetWidth/Height properties of elements that are either sized in relation to their text contents or CSS sized with font size related units (em, ex, etc.) will change."
I am trying to figure a way to base my layout/css on font size, as set by the user in his or her browser settings. For example, in Chrome, if a user has set his or her primary font size to 24--
Chrome: "Wrench">"Options">"Under the Hood">"Change Font and Language Settings">"Fonts and Encoding">Serif Font>"Change">Font Size="24".
--
How can I pick up the event? Working with an example..., let's say I have some DIV's with a set height, 60px:
<div class="dwarfer" style="height: 60px;">Whoa?</div>
Default font size is 9 pt. If the user sets his or her font size to 24 pt (not very high for someone who is visually impaired), ctrl+'mousewheeling down' to the minimum font size may not cause the text to reveal. So, it's best to adjust the height by a variable:
$divheight = 5px/1em
If you know what the event is or how to find it, please find the event. Then, please create an example in PHP that uses $divheight to adjust the height based on the user-selected browser font size.
The closest solution I have found for detecting font changes is:
<!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>
AND
<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>
As seen and tutorialized at http://www.alistapart.com/articles/fontresizing/.
Even using this code, I am having trouble incorporating $divheight directly into my CSS file:
/* CSS */
<?php
//variables
$divheight = 5px/1em
//end variables
//styles
echo '.dwarfer{' . "\n" . 'height:' . $divheight; . "\n" . '}'
//end styles
?>
Code comments are GREATLY appreciated! Thank you!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
不要使用固定的 css 单位，如 px 和 pt。使用 em 或 ex。
Don't use fixed css units like px and pt. Use em or ex.
使用
em单位而不是px。em是相对于当前字体大小的，因此要做您想要做的事情，只需将您的 div 更改为如下所示：不需要 javascript。该 div 的高度始终足以容纳一行文本 - 当字体变大时，div 会变高以容纳它，而当字体变小时，div 会变小。
我想这就是你要找的。
关于
em单位的一些附加信息：您几乎可以在任何需要使用
px的地方使用em。其中包括font-size规则。因此：该 div 中包含的文本将是其父级文本的两倍大。
use units of
emrather thanpx.emis relative to the current font size, so to do what you're trying to do, just change your div to something like this:No javascript required. That div will always be just tall enough to hold one line of text -- when the font gets bigger, the div will get taller to accommodate it, and when the font gets smaller the div will get smaller.
I think that's what you're looking for.
A little additional information about the
emunit:You can use
empretty much anywhere that you would usepx. That includes thefont-sizerule. So:The text contained in that div would be twice as big as the text of its parent.