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上，线条和文字非常不同步。

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

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

试过codepen，尝试用node（browserSynch）创建一个localhost，然后mamp，仍然无法正常工作。

Answer 1

Okey，解决了它：
text-size-adjust: none;

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

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

1 个答案: