HOME技術ウェブAndroidとiPhoneでスマホ用のウェブサイトの文字サイズが異なる

AndroidとiPhoneでスマホ用のウェブサイトの文字サイズが異なる

ウェブサイトをスマホ対応しようとCSSをつくり、いざ確認してみるとAndroidとiPhoneで文字サイズがかなり違う、ということが起こりました。
iPhoneの方がAndroidよりも小さく、iPhoneでみやすいように文字サイズを大きくするとAndroidで大きくなりすぎてしまいます。

フォントを変える

これは、AndroidとiPhoneでデフォルトで表示するフォントが異なることが原因でした。
CSSでfont-familyを指定することで解決できます。

body{
font-family:”ヒラギノ角ゴ Pro W3″, “Hiragino Kaku Gothic Pro”, “メイリオ”, Meiryo, Osaka, “MS Pゴシック”, “MS PGothic”, sans-serif;
}

なお、スマホで見やすいフォントサイズは16~32pxと言われています。

関連記事

ウェブフォントを埋め込み任意のフォントを表示させる

ウェブサイトの表示をさせる際に、自分で指定したフォントで相手にも表示させる方法です。 通常、ウェブサイトのフォントは、閲覧する人のコンピュータに同じフォントがなければ、CSSでfont-familyを…続きを読む

ChromeでCSSを更新したときに再読み込みで反映させる

Chromeでウェブサイトをチェックしている場合、CSSを更新した際にブラウザの更新を行って再表示しても、CSSの変更が反映されません。 これはキャッシュがChrome内に残っているために起こっている…続きを読む

Zoomの有料契約を解約する

Zoomを有料で契約していると、1年ごとの自動更新に設定されます。 Zoomを解約する方法を調べました。 Zoomの自動更新をキャンセルする Zoomの解約とは、契約の自動更新をさせなくすることと同義…続きを読む

iPadにiTunes経由でアプリをインストールする

iPadにWindowsのiTunesを介してアプリをインストールする手順です。 まずiPadをコンピュータとつなぎます。 次にipaファイルを入手してください。自前で開発している場合には、ローカルに…続きを読む

CSS3で複数条件のセレクターを指定する

CSS3を使ってテーブルの両端の列の右側はボーダーを表示せず、それ以外のセルの右側にはボーダーを表示したい、という場合には、複数の条件を適用したセレクターを設定する方法です。 「~かつ、~」というセレ…続きを読む

Googleカレンダーに別のアカウントのカレンダーを複数同期する

Googleカレンダーに、別のGoogleアカウントのカレンダーを同期させることはできますが、別のGoogleアカウントで複数設定しているカレンダーをそれぞれ同期させる方法がわからなかったので調べまし…続きを読む

CSSで内容が少ない場合でもフッターを画面最下部に表示する

ウェブページの内容量が少ない場合には、フッターをブラウザの表示領域最下部に表示し、内容量がある場合にはスクロールした最下部に表示する方法です。 フッターを画面最下部に表示する HTMLソース <…続きを読む

CSSで画像の縦横比を保ったまま大きさを変えて表示する

縦横比を保ったまま画像のサイズを変えて表示する方法です。 例えば、ウェブサイトをPCで閲覧するためのサイズとスマホで閲覧するサイズの2種類をCSSで切り替えてつくる場合、画像のサイズもPCとスマホによ…続きを読む

Fireworks:現在のFireworksユーザー権限では、レジストリ情報を更新することができません。と表示されて起動しない

Fireworks CS6を起動しようとしたら「現在のFireworksユーザー権限では、レジストリ情報を更新することができません。Dreamweaverを併用しての起動と編集機能は、管理者権限でFi…続きを読む

CSSで徐々に変化させるアニメーション効果をつける

CSSで、マウスオーバー時に、徐々に色が変化したり、形が変化するようなアニメーション効果を付ける方法です。 CSS3で実現 例えば、マウスオーバー時に色を徐々に変化させたい場合には、以下のように書きま…続きを読む