携帯電話でCSSのフォントサイズが正しく動作しない

Question

私はhtml5とcss3を組み込む必要がある学校向けの小さなプロジェクトに取り組んでいます。モバイル版とデスクトップ版の2つの個別の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; 
} 

これは 私のデスクトップ上やフォントサイズを中にHTMLに1EMするように設定されている

私のiPhoneで次のように作成しますファイルの先頭。しかし、1emはモバイルデバイスには十分ではないので、私はそれをもっと大きくしたい、とは思えない。

私は10emのnav h1フォントサイズを与えた場合でも、それはこれよりも大きい取得していません： 私のデスクトップ上に、それは問題なく作業を行いながら

が、そこには次のようになります。

"ブログの投稿"を大きくしようとしているときにも同じ問題が発生しますが、それはできません。

私は通常、CSSの操作に問題はありませんが、今回はわかりません。誰も助けることができますように！私はそれが非常に明白な何かの感情を持っています。 http://snipt.org/zLid2

Answer 1

あなたのHTMLコードを見ました。あなたはメタタグを追加していません。

<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)"> 

Answer 2

私は私はあなたの状況を助けることができると思うカップルの事を参照してください。ここで

http://snipt.org/zLic5はhtmlです：

はここで完全なCSSです。意味的には、メニューリストには<h1>というタグを使用したくないということです。これらのタグを削除し、スタイルをnav li CSSスタイルに適用し、それに応じてパディングを調整します。また、ちょっとお勧めしますが、いくつかのウェブサイトから理想的なモバイルフォントサイジングがptであると聞いてきました。

こちらがお役に立てば幸いです。

Answer 3

リュームを使用してナビゲーションに戻ることができます。

次に、font-sizeを許容範囲（14pxまたは16px）に設定します。

あなたのCSSではmedia-queriesを使用してください。

@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 
    } 
} 

Answer 4

をモバイルデバイス上のテキストを拡張するCSSプロパティtext-size-adjustを試してみてください - 特定のメタタグが必要とされます。たとえば、

を携帯サイトを開発しているとき、あなたは追加する必要があります。何かのように：

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