消除桌面和移动网页上重复的标题标签 <h1>

Question

我有一个网页，可以在移动设备和桌面设备上查看该页面。但是我有两个不同的 CSS 类，如下所示：

<div class=phone-visible>
<h1> .....</h1>
</div>

和

<div class=phone-hidden>
<h1> .....</h1>
</div>

所以基本上当我在移动设备上打开页面时，会看到一些我专门为移动设备编写的内容/样式。 但是出于 SEO 的目的，当页面加载时，我不想在特定设备上打开时看到重复的标题标签，就像我在桌面上打开页面时不想看到移动标签一样。（基本上在查看源代码时我不希望显示此内容）我尝试在 CSS 中进行操作（参考其他帖子中的解决方案），但这并没有解决我的问题，因为这些问题仍然出现在源代码中。 有什么特别的方法吗？

Answer 1

您只需要一个 H1 标记实例。

<div class="myclass">
<h1> .....</h1>
</div>

然后根据视口大小使用响应式 CSS 设置样式。这就是响应式的意义所在！您所需要的只是编辑较小的视口尺寸。

因此，改进 Yubraj 的答案，将您的最大屏幕尺寸 CSS 留在 CSS 的主要部分，然后在此处添加您的移动 CSS：

@media (min-width:750px) {
    .myclass h1 {
        font-size: 18px;
        font-color: #000000;
    }
}

Answer 2

使用 CSS 媒体查询来控制不同屏幕尺寸的 UI 下面的示例可能会对您有所帮助。

@media (min-width:750px) {
    .bigScreen {
        display:block !important;
    }
}

//tabs and bigger screen
@media (max-width: 600px) {
    .smallScreen {
        display:block !important;
    }

    .bigScreen {
        display:none !important;
    }
}