2016-01-30 5 views
11

私のアプリでは私はブートストラップを使用し、2remをh2要素に、1.7remをh3タグに設定しました。デスクトップのブラウザの幅を(モバイルのサイズに合わせて)調整しても、h1はh3よりも大きいので、これは私が望むものです。しかし、開発ツールを使用して携帯端末の表示に切り替えたり、携帯電話からサイトを表示したりすると、h1はh3より小さくなります。ここで何が起こっているのでしょうか?それは私が作成した複数のサイトで発生しました。モバイルデバイスでブートストラップ見出しのフォントサイズが小さい

例フィドル(バイオリンで問題を複製しかし、それはコードですができませんでした。):https://jsfiddle.net/gor87kg6/1/

問題が発生しているライブサイト:http://jayatours.lk/

+0

H1の要素を調べ、擬似モバイル画面でH1の現在のフォントサイズを確認してください。 – iMarkDesigns

+0

モバイルビューでのh2のサイズは2remとh3 1.7rem ... – THpubs

+0

@mediaを使って上書きしようとしましたか? – iMarkDesigns

答えて

9

あなたのウェブサイトがビューポートメタを利用していなかったことに気付いたブートストラップモバイルの最初のアプローチに続いて、

<head>に以下を追加してみてください:

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

背景情報:

モバイルブラウザでは、画面よりも通常より広く、仮想的な "窓"(ビューポート)内のページをレンダリングそのため、すべてのページレイアウトを小さなウィンドウに絞り込む必要はありません(モバイルに最適化されていないサイトが数多くあります)。ユーザーは、ページの異なる領域を見るためにパンとズームを行うことができます。

ビューポートインフォメーション:

widthプロパティは、ビューポートのサイズを制御します。これは、width = 600のような特定のピクセル数に設定することも、100%のスケールでCSSピクセルの画面の幅である特別な値device-width値に設定することもできます。 (対応する高さとデバイスの高さの値があり、ビューポートの高さに基づいてサイズや位置が変更される要素のページに役立ちます)

これは、問題の原因として考えられますremが正しく実装されているようです。 mobile/ tabletデバイス自体のdpi/ screen resolutionにある可能性があります。

+0

ありがとう!それはまさに私が持っていた問題です。 – THpubs

0

remはフォントサイズに対するユニットでありますベース(html)タグ。ブラウザでのデフォルトは、明示的に宣言していない場合は通常16ピクセルです。おそらく、モバイルブラウザのデフォルト値はもっと小さくなっていますか?

remユニットを使用する前に、ベースフォントサイズを設定してみてください:

html { font-size: 16px; } 
+0

実際には、ブートストラップはこれを '10px'に設定しています。しかし、まだ問題があります。 – THpubs

0

私はすべての問題が表示されません。それでも問題が見える場合は、これを解決する2つの方法があります: 1)h1 font-sizeがメディアクエリで再度設定されていないことを確認してください 2)htmlの&に適用されているベースフォントを確認してくださいメディアクエリでリセットされました