html - 移动浏览器 (iOS) 上的 CSS 行高

Question

我尝试使用 HTML 和 CSS 做的事情很简单:创建笔记本线条效果。
网络上有很多博客文章介绍了使用此渲染线条的简单解决方案:(SCSS 中的以下片段)

.notebook-effect{
  background-image: linear-gradient(grey 1px, transparent 1px);
  background-size: 100% $line-height;
  background-repeat: repeat-y;}

在所有桌面浏览器上，它都非常有效。然而，在 iOS safari 和 chrome 上，线条和文本变得非常不协调。

此代码笔可能会澄清问题，请在您的移动设备上打开它:
https://codepen.io/viiana/pen/MXObLj?editors=1000

只是为了解决一些问题:
上面的 codepen 只是我正在做的一个更大的 CSS 排版元素中的错误部分，欢迎您查看:
https://github.com/SenhorLucas/LUV-Typography

尝试了 codepen，尝试使用节点 (browserSynch) 创建本地主机，然后是 mamp，仍然无法正常工作。

Answer 1

好的，解决了:
文本大小调整:无；

如果未检测到移动优先布局，某些移动浏览器会应用文本膨胀因子。这意味着如果我将基本文本大小设置为 1rem，移动浏览器会将其显示得更大，例如 1.5rem，以提高可读性。
https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust