图片上的文字未在移动浏览器中显示答案

【问题标题】：Text over image not showing in mobile browser图片上的文字未在移动浏览器中显示
【发布时间】：2015-04-28 21:59:23
【问题描述】：

所以我在图像上放置了一些链接（文本），在桌面浏览器中一切正常，但是，一旦您在移动浏览器中打开它，文本就不会显示。这是我的 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>

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

【问题讨论】：

标签： html css image mobile text

【解决方案1】：

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

对于屏幕宽度至少为 1000 像素的桌面浏览器，它会显示为至少 13 像素，这完全可以。

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

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

【讨论】：