#UX #设计 #移动端适配
https://fixupx.com/uiuxadrian/status/1944713516776362052

Adrian (@uiuxadrian): Bad typography kills good app design.
Most designers guess font sizes instead of using proven standards.
Here's the ultimate guide to UI font sizes for mobile apps (iOS):

🧵 Thread • FixupX

Adrian (@uiuxadrian)

Bad typography kills good app design.

Most designers guess font sizes instead of using proven standards.

Here's the ultimate guide to UI font sizes for mobile apps (iOS):

#优质博文 #新动态 #前端 #css
🚀 Frontend Focus #690 — April 30, 2025

AI 摘要：本期 Frontend Focus 涵盖前端领域多个热点话题，包括 Google Chrome 可能被拆分的影响争议、新型开发工具 Tonkotsu IDE 的发布、CSS 排版单位优化、3D 特效实现，以及 Firefox 新功能等。同时提供了丰富的教程、工具资源和行业动态，涉及 HTML 局限性、错误信息设计、Canvas 元素优化等实用内容。

1. 社区动态
• Google Chrome 拆分争议：DHH（Rails 创始人）反对强制拆分 Chrome，认为虽然 Google 需为广告市场垄断负责，但拆分 Chrome 可能损害生态
• Firefox 更新：新增标签分组功能，并在 Firefox 139 夜间版支持 View Transition API。
• Brave 浏览器：社区推动拦截 Cookie 横幅功能

2. 技术文章与教程
• 📑 万维网背后的软件在 1993 年的这一天  被放到公共领域，尽管 Web 的概念是在 1989 年发明的
• 3D 翻牌效果：Jhey Tompkins 详解如何用代码模拟机场时刻表的机械翻牌动画（3D split flap），附演示链接。
• 使用 CSS 行高单位完善排版：Jen Simmons 介绍 lh 和 rlh 单位，实现布局尺寸与文本行高的直接关联。
• HTML 局限性：Chris Coyier 探讨为何原生 HTML 不支持模块化引入（includes）
• 如何编写真正帮助用户而不是让他们感到沮丧的错误消息：Amy Hupe 提出关于创建错误消息的实用建议，帮助用户快速恢复并继续浏览您的产品/服务。
• The canvas Element：Heydon Pickering 分析其可访问性与性能取舍。
• CSS 锚点定位：Geoff Graham 解释如何简化元素重叠布局。
• AI 编码的隐性成本: 无论您是全神贯注于 vibe coding，还是觉得 AI 开发有些可疑，本文都会思考这门手艺的乐趣，值得深思。 #AI

3. 工具与资源
• 响应式字体生成器：支持 CSS/Sass 输出，使用 clamp() 函数适配不同屏幕 #响应式 #移动端适配
• Storybook 9 Beta：新增可视化测试、无障碍测试等组件开发功能
• track-list：Miriam Suzanne 推出封装播放列表控制的 Web Component
• 设计令牌名称生成器：当您需要快速入门时，此工具将为您的设计系统创建现成的命名约定

The Mozilla Blog

Related Articles

What happens when 4,500 people ask for the same feature? At Firefox, we build it. Tab groups have long been the most requested idea on Mozilla Connect –

#碎碎念 #移动端适配 #坑
我恨 Safari（咬牙切齿）
当你在用svg + foreignObject + transform 和 svg 里各种定位的时候会在 Safari 上收获一坨 bug！！！还贼 tm 难调，日常安卓上和设备仿真上都是正常的 Safari 异常

我发现 iOS Safari 中有关 foreignObject 的一个奇怪的错误。当我为 opacity 中的 HTML 内容设置 CSS 样式（在我的例子中是一个按钮）时，它会在 SVG 上绝对定位。但是当我移除 opacity 后，它就按照预期定位了。调试这个问题花了我几个小时。

尝试将您的 foreignObjects 包裹在 group 元素中。我发现使用变换样式 foreignObjects 在 Safari 中效果不佳。

Sing with me Safari is the new IE！

啊！！！破问题害我挠头了一下午。

https://stackoverflow.com/questions/51313873/svg-foreignobject-not-working-properly-on-safari

看着像是 09 年就发现了的问题，现在也没修。
https://bugs.webkit.org/show_bug.cgi?id=23113

#优质博文 #前端
View Transitions Applied: Dealing with the Snapshot Containing Block
https://www.bram.us/2025/03/04/view-transitions-snapshot-containing-block/

AI 摘要：探讨视图转换伪元素坐标空间差异导致的布局跳跃问题及解决方法。

本文深入分析了在视图转换（View Transitions）中使用 ::view-transition-group(*) 伪元素时，因坐标系差异（视口 vs 快照包含块）导致的布局跳跃问题。作者通过代码示例说明如何通过 getBoundingClientRect 获取元素的旧/新位置，并利用这些坐标优化动画关键帧。然而，在移动端场景中，由于视口（Layout Viewport）与快照包含块（Snapshot Containing Block）的坐标系原点不同（如地址栏影响），直接使用视口坐标会导致动画跳跃。文章提出需通过坐标系转换方法解决这一问题，并附移动端示例验证解决方案的有效性。

#视图转换 #css #性能优化 #移动端适配

Bram.us

View Transitions Applied: Dealing with the Snapshot Containing Block

Beware when manipulating the coordinates of the View Transition’s ::view-transition-group(*) pseudo. Depending on where you read those coordinates from, you might end up with layout jumps when writing them back. This post details the pitfalls and how to deal…

#优质博文 #前端 #移动端适配 #RWD
将响应式网页设计推向极致 - Taking RWD To The Extreme

摘要：Tomasz Jakut 回顾了网页设计的发展历程，回顾了表格布局风靡一时、Flash 游戏塑造网络文化的时代。 然后，响应式网页设计（RWD）出现了——这常常让人感觉像是历史的终结，至少对网页设计来说是这样。 毕竟，我们仍在创建响应式网站，这才是真正的网页布局方式（The True Way）。 然而，今年，也就是 2025 年，是伊桑-马科特（Ethan Marcotte）发表文章 15 周年，这篇文章永远地改变了网页开发。 以 "网络 "年计算，这是一个完整的时代。 所以，也许在 RWD 之后发生了一些事情，但它是如此明显，以至于几乎不为人所知。 让我们试着揭开它的面纱。
通过DeepL翻译

via Frontend Focus#679

将响应式网页设计发挥到极致--自从伊森-马科特（Ethan Marcotte）首次撰文介绍响应式网页设计（Responsive Web Design）以来，已经过去了 15 年（！），在此期间，我们获得了各种新的强大 CSS 布局工具（如 Flexbox 和 Grid）。 这些布局系统反过来又开创了一个声明式、固有网页设计的新时代，浏览器比以往任何时候都更有能力处理布局。

Smashing Magazine

Taking RWD To The Extreme — Smashing Magazine

Tomasz Jakut reflects on the evolution of web design, from the days of table-based layouts and Flash games to the rise of responsive web design (RWD), which often feels like the end of history in web layout. But as 2025 marks the 15th anniversary of Ethan…

#优质博文 #响应式 #前端 #移动端适配 #css
Control the Viewport Resize Behavior on mobile with interactive-widget

AI 摘要：文章介绍了通过 interactive-widget 关键字在 <meta> 标签中控制移动设备上虚拟键盘弹出时的视口调整行为。默认情况下，虚拟键盘会调整视觉视口（Visual Viewport），但不会影响布局视口（Layout Viewport）。通过设置 interactive-widget=resizes-content ，可以让布局视口也随之调整，从而使视口单位动态变化。该功能已在 Chrome 108+ 和 Firefox 132+ 支持，但 Safari 尚未实现。

via HTMHell

Control the Viewport Resize Behavior on mobile with `interactive-widget` - HTMHell

A collection of bad practices in HTML, copied from real websites.

#碎碎念 #坑 #前端 #移动端适配 #响应式
又是因为没有 iphone 踩坑的每一天，安卓移动端 chrome，我的设备上滚动的时候没意识到 ios 的 safari 滚动的时候可视区域是会变化的（讲真这个逻辑我看着挺别扭的，在一些滚动驱动的网站里），用 ipad 侧拉出来模拟了一下然后发现 md，心情美丽///
之前就因为类似的问题把 vh 换成 dvh，又因为 dvh 出了问题换成了lvh 🤔
有什么更好更优雅的办法吗（对于 gsap 滚动驱动的网站）

ps: 好像也不能说是因为 ios 踩坑，有这种行为的浏览器还挺有挺多的，下拉变化可视区域隐藏工具栏，比如小米的系统自带浏览器、firefox，我常用的 chrome 和 kiwi 没有
pps: 找了安卓和 ios 好几个浏览器对比，感觉还是 safari 的影响范围最大。

https://stackoverflow.com/questions/68094609/ios-15-safari-floating-address-bar

掉落邀请码：H8mjgx1Rkw
之后我要减少发邀请码的频率去 follow 打赏一些创造者了喵~要是实在想要的在频道评论区问我吧~