首页 > 编程语言> > php-如何设置if / or条件,以使设计根据用户浏览器的字体大小而变化？

php-如何设置if / or条件,以使设计根据用户浏览器的字体大小而变化？

2019-11-05 21:29:05 作者：互联网

答：如何从字面上检测用户的字体比例,以便可以将其用作变量？

我正在尝试根据用户的字体缩放比例(而不是浏览器缩放比例)创建一些if / else语句,以扩展网站的可用性.

给定的两个答案是针对单个案例(所描述的方案)的解决方法.我最初提出的方案并不是我的最佳选择.尽管如此,它仍然是可用的,并且它是我可以即时想到的最容易理解的场景.

“如果更改了字体大小,则元素的offsetWidth / Height属性值将更改为与文本内容相关的大小,或者与字体大小相关的单位(em,ex等)调整为CSS的元素大小.”

我正在尝试找到一种基于字体大小的布局/ css的方法,该字体大小由用户在其浏览器设置中设置.例如,在Chrome中,如果用户将其主要字体大小设置为24–

Chrome：“扳手”>“选项”>“内幕”>“更改字体和语言设置”>“字体和编码”> Serif字体>“更改”>字体大小=“ 24”.

–

我该如何接起活动？使用示例…,假设我有一些DIV,其高度设置为60px：

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

默认字体大小为9磅.如果用户将他或她的字体大小设置为24磅(对于有视觉障碍的人来说不是很高),则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
?>

代码注释非常感谢！谢谢！

解决方法:

不要使用固定的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)

标签：dom,accessibility,usability,php,jquery
来源： https://codeday.me/bug/20191105/1997918.html