Navigation menu

0755-82192581
  • Contact us
  • 0755-82192581
  • 深圳市罗湖区嘉宾路深华商业大厦9楼(地铁1号线国贸站B出口既是)

    3375726676@qq.com


    © 2007-2021 All Rights Reserved.
  • 策略型高端网站设计公司

    Strategic advanced website design company

    View More
  • 网页设计需要流畅的排版

    时间:2023-01-05  作者:GARY  来源:https://www.niegoweb.com/
    当我们在看感兴趣的网页设计时通常是希望文本更大,当我们将文本锚定到视口大小时,即使使用(分数)乘数,我们也可以剥夺他们这样做的能力。它可以像禁用变焦一样成为障碍。如果用户无法将文本调整到原始大小的200%,您可能还会看到WCAG 1.4.4调整文本大小(AA)问题—检查成功标准1.4.4的失败,因为不正确地使用视区单位来调整文本大小。


    高端网页设计


    将视窗宽度设为800像素,并查看缩放至220%时文本如何变小。如果您继续缩放,文本将再次开始增加,但永远不会达到其2倍的大小增加(浏览器目前有500%的缩放限制),如果你无论如何都要使用响应式排版技术,你必须通过缩放来测试它。跨设备、跨浏览器、跨视窗大小(不是每个人都全屏浏览)和跨视窗方向缩放。

    因此如果你想确保用户能够将文本放大到原始大小的至少200%,你应该做大量的测试。在这篇文章中,我提出了解决方案如何预测前面提到的WCAG在发展阶段的失败。我不确定我的发现是否能保证100%没有问题,但是我确信它将有助于避免开发人员在真实用例中犯错误。


    当我们试图将页面缩放到其原始大小的200%时,像素的高度和宽度都变得两倍大,如果不进行缩放,我们将会看到这一段的文本"可视尺寸"。由于不同设备的像素的不同物理尺寸,这"可视尺寸"会从一个设备改变到另一个设备。真的,如果你的42英寸电视的分辨率为1920×1080像素,那么它包含2073600像素,例如,你的6.1英寸iPhone 13的分辨率为2532×1170像素,包含2962440像素。

    我们能够预测缩放时文本大小的变化行为,以避免1.4.4调整文本大小(AA)下的WCAG失败。等式(5)和“最低200%缩放要求”(6)给我们一个简单的方法,在发展阶段预测一个问题并分析它。由于开发人员可以实现文本字体大小对视口宽度的各种可能的依赖性,所以没有问题的通用解决方案。但是您可以稍微更改输入参数并查看预测。在大多数情况下,这样的修正会给出期望的结果。我们应该选择完全消除文本缩放可能带来的问题。

    相关案例

    OTHER CASE