移动网络困扰：导航常见的CSS和字体问题ð§-DEV365 开发者社区

简介ð

啊，网络开发的乐趣！桌面浏览器上的一切看起来都很完美，但是然后切换到移动设备，突然之间就像您进入了平行的宇宙一样。怪异的垂直卷轴，拒绝在第一个渲染上加载的字体以及那些讨厌的额外卷轴。 -

但不要害怕，开发人员！我们已经为这些常见的移动网络开发问题提供了解决方案。让我们潜入！

1.额外垂直卷轴的神秘案例ð

问题：您已经将DIV设置为100VH，但是在移动设备上，您仍会获得一些意外的垂直滚动。为什么？诸如Chrome和Safari之类的移动浏览器会引入额外的UI元素，这些元素可能会弄乱您的完美布局。

解决方案：根据窗户的内部高度动态设置身体高度。

function setBodyHeight() {
    document.body.style.height = `${window.innerHeight}px`;
}

useEffect(() => {
    window.addEventListener('resize', setBodyHeight);
});

useEffect(() => {
    setBodyHeight();
}, []);

说明：通过将身体的高度设置为窗户的内部高度，我们确保页面占用可见视图的确切高度，无论浏览器UI元素如何。

2.字体加载惨败

问题：您正在使用自定义字体，但是在初始渲染期间，浏览器的默认字体加载。这可能会给用户带来刺耳的体验。

解决方案：预紧您的字体！

<link rel="preload" as="font" href="YOUR_FONT_PATH_HERE" crossorigin>
<link rel="preload" as="font" href="YOUR_SECOND_FONT_PATH_HERE" crossorigin>

说明：通过预加载字体，您要告诉浏览器在加载过程的早期获取它们。这样可以确保到您的内容呈现时，您就可以使用自定义字体了。像Cloudinary这样的CDN中存储资产可以进一步加快此过程。

3.水平滚动潜行攻击ð«

问题：您将网站设置为100VW宽度，没有额外的水平滚动。它在台式机上工作，但是有些移动浏览器忽略了体内的溢出属性，导致水平滚动。

解决方案：为您的身体内容使用包装器。

<body>
    <div class="WholeBodyWrapper">
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
    </div>
</body>

.WholeBodyWrapper {
    overflow-x: hidden;
    position: relative;
    height: 100%;
}

说明：通过包裹身体的整个内容并将溢出属性设置在包装器上，我们确保尊重溢出规则，即使在可能在身体元素上忽略它的移动浏览器上本身。

结论ð

移动网络开发可能很棘手，但是借助正确的工具和知识，您可以轻松地浏览这些常见的陷阱。请记住，关键是要再次测试，调整和测试。愉快的编码！ ð

我希望这篇博客文章能够成为有用的指南！切记用您的实际路径或值替换代码片段中的占位符。