私は誰かのために書いているWordpressのテーマにピン止めできない問題に遭遇しています。モバイルでは、段落の数によってフォントサイズが異なります

特定の段落数が追加されるまで、ページまたはそのページのコンテンツのフォントサイズが不適切に縮尺されています。

この問題は携帯電話に固有の問題です。

あなたが4つ以下の段落を持っている場合は、フォントがそうのような、非常に小さい：

あなたはそれが意図されたサイズまでジャンプ第五段落を追加した場合。

これは、あなたが試すことができます開発ツールさまざまなデバイスサイズオプション間で一貫性のある、と私は私の家で、ここでそれをテストすることができた2台の電話機。次のように

メディアクエリーの内部に収容されていない主なクラスがある：

.sprogWeekOverview p, .post p{ 
    margin: .67em 0; 
    font-family: Georgia, serif; 
    font-size: 1.15em; 
    color: #1f1f1f; 
    padding: 4px; 
}

メディアクエリを有する他のCSSコードがある：

@media screen and (max-width: 680px){ 

    .sprogWeekOverview p, .post p{ 
     margin: 8px 0; 
     font-family: Georgia, serif; 
     font-size: 16px; 
     color: #1f1f1f; 
     padding: 2px; 
    } 

    } 

@media screen and (min-width: 681px) and (max-width: 1024px){ 

    .sprogWeekOverview p, .post p{ 
     margin: 12px 0; 
     font-family: Georgia, serif; 
     font-size: 16px; 
     color: #1f1f1f; 
     padding: 2px; 
    } 

}

bodyタグは、ベースを有し、font-サイズはfont-size: 16px;です。

これがなぜ発生するのか、どのように修正するのか、間違っているのは分かります。ありがとう。

出典

2016-06-15 Jem

これは

モバイルブラウザをなぜ起こるかは、彼らが訪問しているサイトが大規模なデスクトップスクリーンのためではなく、携帯電話の画面のために書かれたことが、デフォルトでは想定しています。多くのサイトレイアウトには、サイドバーや大きな画面でのみ使用できるものがあります。したがって、モバイルブラウザはより広いブラウザウィンドウをシミュレートし、それをズームアウトして画面にすべて収まるようにします。このズームアウトはテキストが小さい理由です。あなたが本当にそれを読もうと思えば、ブラウザはまだ2本の指でテキストを拡大することができます。

モバイルブラウザでは、ページ上で最も重要なテキストが何であるかを推測し、人工的にフォントサイズを拡大します。この妥協は、デスクトップデザインのニュースサイトの記事のテキストを、それらを拡大することなく読むことができるだけの大きさで、しかもサイドバーをズームアウトして、あまりにも多くのスペースを取らないようにします。このフォントサイズのインフレーションは、「あなたができること」という見出しが最初から大きなものになっていた理由です。

上記の振る舞い、ズームアウトおよびフォントサイズの膨張は、モバイルブラウザによるページの見た目の推測に基づいています。この場合、第5段落を追加すると、モバイルブラウザでは最終的にページがモバイルで読みやすいようになるため、ワイドスクリーンをシミュレートしてズームアウトする必要はありません。しかし、一般的に、モバイルブラウザが使用する特定のヒューリスティックに頼るべきではありません。

それを修正する方法

あなたが以内にこのタグを追加することによって、あなたのページのために、この機能を無効にすることができ

あなたのHTMLの<head>：

<meta name="viewport" content="width=device-width, initial-scale=1">

これは、小さな画面上で、このページをテストし、確認したモバイルブラウザに指示しますそれは読みやすいので、小さな画面のためにサイトを自動的に適応させる必要はありません。 this Mozilla articleの<meta name="viewport">について詳しく読むことができます。

出典

2016-06-15 02:51:36

私はビューポートがピクセルアスペクト比だけでなく様々なものにとって重要であることを知っていました。この場合、私はそれを見落としていました。私には分かっていることは、ブラウザが他のコンテンツよりも重要なコンテンツを推測するということでした。私はhtml5がますます重要になると考えています。レイアウトのページを改善するためにこれらの要素を使用し、ブラウザに重要なものや見ているもののアイデアを与えるべきですか？ビューポートを正しく設定する。 – Jem

@New_Wavいいえ、重要な要素については、ブラウザのヒントを設計しないでください。ブラウザーが使用するヒューリスティックは文書化されておらず、いつでも変更することができます。 ''をスキップするだけで、重要度ヒューリスティックは無効になり、各要素のテキストサイズを完全に制御することができます。 –

モバイルでは、段落の数によってフォントサイズが異なります

答えて

これは

それを修正する方法

関連する問題