CSS字體大小在移動設備上無法正常工作

我正在爲學校開發一個小型項目，我們必須合併html5和css3。這只是在開始階段，因爲我試圖爲移動版和桌面版創建兩個單獨的css文件。CSS字體大小在移動設備上無法正常工作

對於移動版本，我試圖讓菜單顯示爲列表，但字體更大。儘管如此，我仍然無法做到這一點。

這是菜單的CSS：

nav ul { 
    list-style: none; 
    background-color: green; 
    padding: 0; 
} 

nav li { 
    border-bottom: 1px solid black; 
    padding: 5px; 
} 

nav { 
    margin-top: -36px; 
    width: 100% 
} 

nav h1{ 
    margin: 0; 
}

這造成我的桌面 Desktop with 1em 上和我的iPhone iPhone with 1em

的字體大小設置爲1EM在HTML中的以下文件頂部。但1em對於移動設備來說不夠大，所以我希望它更大，這似乎是不可能的。

即使我給10em的nav h1字體大小，它並沒有比這更大： iPhone with 10em

雖然我的桌面上，它的工作沒有問題，它看起來像這樣： Desktop with 10em

同樣的問題發生時，試圖使「博客帖子」更大，他們只是不會這樣做。

我通常沒有使用CSS的麻煩，但這一次我無法弄清楚。希望任何人都能幫忙！我感覺這是非常明顯的。

下面是完整的CSS：http://snipt.org/zLic5

下面是HTML：http://snipt.org/zLid2

來源

2013-02-01 Rvervuurt

爲什麼不以字節而不是em來聲明字體大小？在旁註中，如果你使用媒體查詢，你可以堅持一個CSS，只覆蓋設備之間不同的樣式。 –

這裏有一個解釋：http://stackoverflow.com/questions/750594/maximum-font-size-a-page-can-render。你花很多精力來問你的問題，我不能讓自己投票把它作爲一個副本來結束它。 –

我看到了您的html代碼。你沒有添加任何元標記。某些meta標籤是必要的，當你正在開發移動網站，

例如，你必須添加 -

<meta name="HandheldFriendly" content="true" /> 
<meta name="MobileOptimized" content="320" /> 
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, width=device-width, user-scalable=no" /> 
<title>Welcome to your school name</title> 

<!-- smart phone css --> 
<link href="assets/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 0px) and (max-width: 480px)" /> 

<!-- Tablet --> 
<link href="assets/tablet.css" rel="stylesheet" type="text/css" media="all and (min-width: 481px) and (max-width: 800px)" /> 

<!-- Desktop --> 
<link href="assets/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width:801px)">

來源

2013-02-01 07:12:01

嗨，謝謝你的回答！添加元標籤與視口解決了問題！我當然也添加了其他元素。我沒有使用到.css的鏈接，因爲我正在使用@media屏幕，所以我只需要跟蹤一個css。 – Rvervuurt

好的答案....謝謝... – KarSho

@ naresh-kumar - 謝謝。這也幫助了我。我確實注意到了一個錯字，它應該是'用戶可擴展的'（不是「e」）。乾杯 – Matt

我看到一對夫婦的事情，我認爲可以幫助你的情況。從語義上講，你根本不想在菜單列表中使用<h1>標籤。刪除這些標籤並將樣式應用於css樣式並相應地調整填充。此外，只是一個建議，但我從幾個網站聽說，理想的移動字體大小是pt。

我希望這會有所幫助。

來源

2013-02-01 02:25:37 davo2323

回到使用li爲你導航。

然後將font-size設置爲可接受的值（14px或16px）。

然後，在你的CSS中，使用媒體查詢。

@media (max-width: 480px) { // will only happen on viewport less then 480 pixels (mobile) 
    li { 
    font-size:18px; // larger font (or whatever you want to do 
    padding: 20px; // can even increase your padding 
    } 
}

來源

2013-02-01 03:48:00 awolfe76

嘗試CSS屬性text-size-adjust規模在移動設備上的文字。例如：

nav { 
    text-size-adjust: 200%; 
} 
nav ul { 
    text-size-adjust: 300%; 
} 
nav h1 { 
    text-size-adjust: 400%; 
}

來源

2017-11-13 19:49:19

謝謝，這解決了我的問題。這是試驗的方式：https：//developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust 此外，我現在可以看到，默認情況下是不同的元素的字體大小改變按不同的金額。我爲'body'標記設置爲250％，以便所有元素可以一起縮放。 – jchavannes

CSS字體大小在移動設備上無法正常工作

回答

相關問題