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で画面レイアウトをスマホ用とPC用とで分ける

CSSを使ってウェブサイトの画面レイアウトを、スマホ用とPC用とで切り替える方法です。 画面の幅によって表示方法を切り替える スマホを認識するというよりは、画面の横幅が何ピクセル以下か、によって読み込…続きを読む

Zoomの有料契約を解約する

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

iPhoneのSafariでキャッシュをクリアする

iPhoneでウェブサイトのCSSを修正して確認しても、反映されないことがあります。 これはブラウザのキャッシュが削除されていないことが原因です。 今回はiPhoneのSafariでキャッシュを削除す…続きを読む

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

CSSの設定のみで、内容が少ないページであっても、フッターは最下部に表示され、さらに内容がたくさん書いてある場合には、スクロールした最後にフッターが表示されるようにする方法です。 以前にも紹介しました…続きを読む

iPadに保存した画像をコンピュータに保存する

iPadのカメラなどで撮影した画像をコンピュータに移動する方法です。Windows10の場合で説明します。 Windows 10の場合 コンピュータとiPadをつなぎます。 コンピュータに認識されたら…続きを読む

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

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

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

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

iPadで信頼されていないエンタープライズデベロッパのアプリを使えるようにする

iPadにiTunes経由などでipaファイルをインストールした際に、「信頼されていないエンタープライズデベロッパ」と表示されアプリを起動できない場合の対処方法です。 iPadに信頼させる iOS13…続きを読む

CSSで二段組のリストをつくる

ulタグを使ったリストをCSSで二段組にして表示する方法です。 HTMLのコード <h2>リスト表示</h2> <ul class=”menu”&…続きを読む

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

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

This website stores cookies on your computer. These cookies are used to provide a more personalized experience and to track your whereabouts around our website in compliance with the European General Data Protection Regulation. If you decide to to opt-out of any future tracking, a cookie will be setup in your browser to remember this choice for one year.

Accept or Deny