画面縮小時にフォントサイズが小さくなってしまう場合の解消法

すごく単純な話だったのですが、結構ハマったのでメモを残します。

レスポンシブなデザインの簡単導入の為に、BOOTSTRAPを導入。

今回、ぼくのサイト「演劇感想文リンク」のページの一部にBootstrapを適用しました。twitterの開発会社が公開しているホームページのデザイン用のフレームワークです。

表紙ページをレスポンシブ化したものの、他のページのデザインをいちから作るのが面倒で、色々検索していて、このフレームワークにたどり着きました。

グリッドシステムやパネル等色々な部品が予め用意されている為、レスポンシブなデザインを作るのには、その部品を組み立てれば良いようです。デザインに制限も色々あるものの、あまりこだわらないならば、確かに作るのは簡単でした。

モバイルサイズで表示するとフォントが超～小さくなる。

ほぼ、ページのデザイン及びページ生成のスクリプトが完成して、公開をする段になって、見た目を確認するととんでもないことが判明しました。モバイルのサイズにするとフォントが超小さくなってしまうのです。

元々想定していたのは、デスクトップで見る時と同じフォントサイズで、画面デザインがモバイルサイズで表示されるイメージだったので、困りました。

←こちらが、デスクトップで表示した時のイメージです。

 原因は<meta name=”viewport”>タグのタイプミス

結果として、原因はとても簡単でした。

ヘッダーの中にあるviewportタグのタイプミスでした。

本来は、以下のようにかかなければならないものでした。

<meta name=”viewport” content=”width-device-width,initial-scale=1.0″>

それを、以下のように記述していました。

<meta name=”viewport” content=”width-device-width,initial-scale–1.0″>

「initial-scale」の値を設定する処で、＝を入力すべきところが、ーになってしまっていました。修正すると以下のようになりました。

イメージどおりの画面になりました。

本日より、この劇場ページの公開を始めています。