移動瀏覽器中未顯示圖片的文字

因此，我在圖片上放置了一些鏈接（文本），並且在桌面瀏覽器中一切正常，但是，一旦您在移動瀏覽器中打開它，文字就不會顯示出來。這裏是我的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>

有誰知道如何解決這個問題呢？

來源

2015-04-28 marteen

您爲鏈接設置的字體大小爲font-size: 1.3vw;，這意味着它們將出現在視口寬度的1.3％處。

對於屏幕寬度至少爲1000px的桌面瀏覽器，它將顯示爲至少13px，這是完全正常的。

對於手機瀏覽器，如果您的設備屏幕寬度爲640px，則它只會顯示爲〜8px，這太小了，這可能是您無法看到它的原因。此外，如果以縱向模式觀看，大多數移動設備的寬度都在320px到400 + px之間，這樣文字會變得更小。

當我把它放在fiddle上時，我認爲沒有文字，直到我放置了一個灰色的佔位符圖像。如果您想縮放它，您應該使用em而不是vw作爲字體大小。

來源

2015-04-28 13:59:23 Billy

移動瀏覽器中未顯示圖片的文字

回答

相關問題