北九州/小倉・門司港でホームページ制作ならお任せください!

BLOG

堀井制作所代表 堀井のブログです

【CSS】スマホを横にした時に文字の拡大を防ぐ方法

スマホサイト閲覧時にスマホを横に向けた時に文字が拡大されてしまう時はcssのbodyタグに-webkit-text-size-adjust: 100%;を記述すると、拡大されずにそのままの文字サイズで表示されます。

スマホを縦向きで閲覧(通常)

スマホサイト縦向き閲覧時

端末を縦向きの状態でスマホサイトを閲覧(CSS記述なし)

-webkit-text-size-adjust: 100%;を記述していない場合、

スマホを横に向けた時に文字が拡大される

何もcssに記述していない場合は、文字が拡大されてしまい閲覧しにくくなってしまいます。(※横向き文字拡大は本来は閲覧しやすいようにとの配慮だと思いますが…)

端末を縦向きの状態でスマホサイトを閲覧(CSS記述あり)

-webkit-text-size-adjust: 100%;を記述すると、

スマホを横に向けた時にCSSを適用すると文字は拡大されない

このように文字の拡大を防ぎ、個人の好みによりますがスマートにみせることができます。

横並びにすると-webkit-text-size-adjust: 100%;の記述が有るか無いかで違いが一目瞭然です

sp-landscape

文字サイズの拡大対処法として是非、CSSの-webkit-text-size-adjust: 100%;を、ご活用ください。

WEBサイト(ホームページ)制作の堀井制作所プロフィール

Seiji Horii

北九州市の小倉北区・門司港を中心にWEBサイト(ホームページ)制作・保守・運用、及びWEBに関するコンサルティング業務を行っております。

新しくホームページを作ってみたい」また既にホームページをお持ちで「もっと有効活用したい」という方はお気軽にご相談ください。

ホームページ制作について
ご相談はこちら