Html 移动浏览器（iOS）上的CSS行高

我尝试使用HTML和CSS做的事情很简单：创建一个笔记本线条效果。
网络上到处都有博客文章，介绍了一种使用以下代码呈现线条的简单解决方案：（SCSS中下面的代码片段）

在所有桌面浏览器上，它都像一个魔咒一样工作。然而，在iOS上，safari和chrome的线条和文字非常不协调。

此代码笔可能会澄清问题，请在移动设备上打开它：


只是想澄清一些问题：
上面的代码笔只是我在CSS排版上做的一个更大项目中的错误部分，欢迎您查看：


尝试使用codepen，尝试使用节点（browserSynch）创建本地主机，然后使用mamp，仍然无法工作。
好的，解决方法是：

文本大小调整：无



如果未检测到mobile first布局，某些移动浏览器会应用文本膨胀系数。这意味着，如果我将基本文本大小设置为1rem，移动浏览器将显示更大的文本，比如说1.5 rem，以提高可读性。



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