スマホで見るとサイトの文字が大きくなる?

最終更新日時 : 2014/07/31
LINEで送る
Pocket

横幅サイズ固定のサイトをスマホで見たら、ところどころ文字が大きくなって、残念なデザインになっていたをスッキリ解決させる方法

こんにちは!最近、2年間お世話になったアンドロイドスマホを、最新版のアンドロイドスマホに機種変更したつむぎです。
電話がかからなかったり、画面がフリーズしたりで、かなりお仕事に影響が出ていたスマホくん。
で、思い切って最新型のAQUOSフォンをGET!
最新型のAQUOSフォンくん、この2年の進化にはすさまじいものが!
動作の滑らかさ、電話機能もストレスなし、おまけにバッテリーも長持ちといいことづくめで、ホントに変えてよかった!!!と実感している今日このごろ。

ただ1点だけ、困ったことが。。。

横幅サイズ固定の自分のサイトをスマホで見たら、ところどころ文字が大きくなって、残念なデザインに!
原因は、最近のスマホに搭載されているユーザーお助け機能。
CSS(スタイルシート:サイトのデザインを定義)の文字表示の設定は無視して、勝手に見やすい大きさに変わっていたのです。
つむぎのサイトは、手紙のように罫線内に文字を表現しています。
下記の写真のように表現できるはずが、スマホで見ると軒並み文字が罫線からはみ出している感じに。これは、なおさないといけません!

 

アンドロイドのスマホで見ると、罫線内の文字が大きくなって、すべて罫線からはみ出していた!

 

[スマホで勝手に文字が大きくなるをスッキリ解決する方法]

①CSSファイルのbodyタグの設定部分に、下記を追加

body{
	/*スマホで勝手に文字が大きくなる対策*/
	-webkit-text-size-adjust: 100%;
}

 

②文字のデザインを変更させたくないhtmlファイルのヘッド部に、下記を追加

<!--リキッドレイアウト:デバイスによってサイズを変更する場合-->
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, maximum-scale=1.0, user-scalable=yes">
<!--ソリッドレイアウト:デバイスによってサイズを変更しない固定サイズ表示の場合→widthは絶対値(例:900)-->
<meta name="viewport" content="target-densitydpi=device-dpi, width=固定値, maximum-scale=1.0, user-scalable=yes">

 

③文字を大きくしたくない箇所のCSSファイルに、下記を追加

/*ID #serviceのpタグの文字を大きくしたくない場合*/
#service p {
	/*Androidブラウザフォントバグ対策*/
	max-height: 999999px;	
}

 

以上の設定を行うことで、文字が勝手に大きくなる現象はスッキリ解決されました。
同じような現象で悩まれた方のお役に立てれば幸いです。

 

LINEで送る
Pocket

PAGE TOP