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;，这意味着它们将以1.3％的视口宽度显示。

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

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

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

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

1 个答案: