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と言われています。

関連記事

iPadで画面をキャプチャする

iPadで画面をキャプチャする方法です。 画面キャプチャ iPadで画面をキャプチャするには、「ホームボタン」を押しながら「電源ボタン」を押します。 その後、どちらかのボタンを離すとキャプチャされます…続きを読む

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

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

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

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

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

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

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

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

Windows10にアップグレードしたらApacheが起動しなくなった

Windows7からWindows10にアップグレードしたところ、Apacheが起動しなくなりました。 Apacheが起動しなくなる理由には大きく2つあります。 1つ目は、httpd.confの書き間…続きを読む

iPadのブラウザで「以下のページは制限されているのでブラウズできません」と表示される

iPadからウェブサイトを開こうとした際に、「以下のページは制限されているのでブラウズできません」と表示され、「Webサイトを許可する」というリンクを押しても無反応で閲覧できなかったので調べました。 …続きを読む

CSSで画面レイアウトをスマホ用とPC用とで分ける

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

iPadにipaファイルをインストールする

iPadにipaファイルを直接インストールする方法です。Windowsでの説明です。 ipaファイルのインストール WindowsにiPadをUSBで接続します。 iTunesを起動します。 デバイス…続きを読む

GoogleMapのURLを短縮URLで取得する

GoogleMapにリンクを貼るときに、URLが長くなってしまうのを防ぐ、短縮URLの取得の方法です。 まず、GoogleMapを開きます。 左上の検索窓に住所を入力して、その住所を検索します(ここで…続きを読む