Safari阅读器模式的奇怪行为答案

【问题标题】：Strange behaviour of Safari's reader modeSafari阅读器模式的奇怪行为
【发布时间】：2020-01-03 06:11:55
【问题描述】：

我使用模板和 HTML+CSS+JS 构建了我的网站（实际上是网页）。结果如下：

https://vigibos.webs.upv.es/

在 Safari（在 iOS 上）中浏览它并打开“阅读器模式”时，我得到一个奇怪的结果：缺少某些部分，并且文本格式错误。

这两张图片显示了 Safari 在 iOS 12.3.1 上是如何渲染网页的，没有和有“仅限阅读器”模式：

“仅供读者阅读”版本遗漏了网站的大部分内容，并且与标题大小不一致：“Advised PhD & Master's thesis”和“Publications”应该是相同的大小和方面，因为两者都是 ' H3' 标题。

我应该在 HTML 代码中寻找什么样的问题/错误才能解决这个问题？？

其他“文本编辑器”（例如某些 Google Chrome 扩展程序）非常正确地呈现网页。所以，也许 HTML 代码没有错误，浏览器错误地解释了 HTML 代码。 您是否知道 Safari 的“阅读器模式”在其他情况下的这种行为？

【问题讨论】：

标签： html safari

【解决方案1】：

在div#main 中，每个子标题似乎都在section 和div 中。删除这些容器并将内容直接放在div#main 下似乎可以解决问题。

section 元素表示通用文档或应用程序部分……section 元素不是通用容器元素。当一个元素仅用于样式目的或为了方便编写脚本时，鼓励作者使用 div 元素。一般规则是，只有当元素的内容明确地列在文档大纲中时，section 元素才是合适的。

——http://html5doctor.com/the-section-element

我不会用<section> 包装我的内容的子部分，因为从标记角度来看，标题是足够分割的指示，而<section> 感觉就像<section> 的设计有其他意图。如果您需要包装它们以进行样式设置，使用<div> 感觉更合适，尽管我不确定这是否适用于 Safari 的阅读器模式。

原创

<div id="main">

    <!-- \\  About  \\ -->

        <section id="about" class="">
            <div class="container">
                <h3>About &amp; contact</h3>
                <p>…</p>
                <ul class="feature-icons">…</ul>
            </div>
        </section>

    <!-- \\  Positions  \\ -->

        <section id="positions" class="inactive">
            <div class="container">
                <h3>Academic positions</h3>
                <ul>…</ul>
            </div>
        </section>

        …
</div>

新

<div id="main">

    <!-- \\  About  \\ -->

    <h3>About &amp; contact</h3>
    <p>…</p>
    <ul class="feature-icons">…</ul>

    <!-- \\  Positions  \\ -->

    <h3>Academic positions</h3>
    <ul>…</ul>

    …
</div>

另见

【讨论】：

该问题对切片的使用似乎符合预期用途。我认为这是 Safari iOS 阅读器模式中的错误。（对于一篇文章中包含多个部分的页面，我也有同样的问题——它似乎选择了最大的部分。）

【解决方案2】：

确实，标记越简单，页面在阅读器模式下的外观就越好（标记当然应该在语义上正确）。但我也同意，这里的部分看起来是正确的。

由于没有官方文档，我们只能从试验和错误中猜测和收集随机事实，我只能假设它是如何工作的。

我认为这里的问题可能是因为操作使用的是 ID 而不是标签和类： <main>、<header>等

在我的情况下，将应该显示的内容包装到帮助中

Here more details

【讨论】：