移动浏览器 (iOS) 上的 CSS 行高答案

【问题标题】：CSS line-height on mobile browsers (iOS)移动浏览器 (iOS) 上的 CSS 行高
【发布时间】：2018-11-26 13:04:56
【问题描述】：

我想用 HTML 和 CSS 做的很简单：创建笔记本线条效果。
网络上到处都有博客文章提出了一个简单的解决方案来使用这个渲染线条：（SCSS 中的下面的 sn-p）

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

在所有桌面浏览器上，它都像一个魅力。然而，在 iOS safari 和 chrome 上，线条和文本变得非常不同步。

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

只是为了澄清一些问题：
上面的 codepen 只是我在 CSS 排版上做的一个更大的项目的错误部分，欢迎您查看：
https://github.com/SenhorLucas/LUV-Typography

尝试过codepen，尝试使用节点（browserSynch）创建本地主机，然后mamp，仍然无法正常工作。

【问题讨论】：

标签： html ios css sass cross-browser

【解决方案1】：

好的，解决了：
text-size-adjust: none;

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

【讨论】：