html - 图像上的文本未在移动浏览器中显示

Question

所以我在图像上放置了一些链接(文本)，在桌面浏览器中一切正常，但是，一旦您在移动浏览器中打开它，文本就不会显示。这是我的 CSS:

#header {
    width: 100%;
    position: relative;
}

#dm {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

#logo {
    position: absolute;
    top: 5%;
    left: 18.8%;
    width: 13.5%;
    height: 64.8%;
    background-color: transparent;
    border: none;
}


h2 {
    position: absolute;
    top: 59%;
    left: 21.7%;
    width: 78%;
}


h2>a {
    color: #f6f6f6;
    font-size: 1.3vw;
    font-variant: small-caps;
    font-weight: lighter;
    font-family: "Times New Roman", Times, serif;
    text-decoration: none; 
    text-shadow: #000000 10% 10% 20%;
    margin-right: 1%;
}

和 HTML 代码:

<div id="header">
<img src="header.png" border="0" id="dm">
<a id="logo" href="index.html"></a>
<h2><a href="slider">Domů</a> <a href="slider">O nás</a> <a href="slider">Web & Grafický design</a> <a href="slider">Digitální kresba</a> <a href="slider">Pro firmy</a> <a href="slider">Ostatní služby</a> <a href="slider">Portfolio</a> <a href="slider">Faq</a> <a href="slider">Kontakt</a></h2>
</div>

有谁知道如何解决这个问题？

Answer 1

您为链接设置的字体大小是 font-size: 1.3vw;，这意味着它们将出现在视口(viewport)宽度的 1.3% 处。

对于屏幕宽度至少为 1000 像素的桌面浏览器，它将显示为至少 13 像素，这完全没问题。

对于移动浏览器，如果您的设备屏幕是 640 像素宽，它只会显示为 ~8 像素，这太小了，这可能是您看不到它的原因。此外，如果以纵向模式查看，大多数移动设备的宽度在 320px 到 400+px 之间，这使得文本更小。

当我把它放在 fiddle 时，我以为没有文字，直到我放置了一个灰色的占位符图像。如果您想缩放字体大小，您应该使用 em 而不是 vw。