iPhoneやiPadで文字にcssが効かない時の対処法

ユナイテッドジュエリー弊社が運営しておりますジュエリーアクセサリー販売サイト「ユナイテッドジュエリー」の公式サイトがリニューアル致しました。以前の黒ベースから一転、白ベースのスッキリとしたデザインに仕上がっております。こちらのサイトはHTML5のレスポンシブサイトになり、スマートフォン、タブレットでの閲覧も可能になっております。大変申し訳ございませんが携帯電話サイト(ガラケーサイト)は廃止となりました。時代の流れ・・・なのですかね・・・。また、只今、ユナイテッドジュエリー本店のショッピングサイトも構築中ですのでご期待ください。今回こちらのサイトを作るにあたり、幾つか初歩的な「ド」ハマりをしてしまい少し公開が遅れてしまいました。そのうちの一つは「iPhone、iPadでcssが効かない!」です。今は大体レスポンシブ対応のリセットCSSなどにはじめから書いてあるのが多いですが、そうでなかったのでハマってしまいました。ググれば一発で出てくるので冷静になって調べればよかったんですがCSS何度も読み返してしまいました・・・。スマホ天下の現在ではもうPCを越える勢いでアクセスがあるのでレイアウト崩れ対策は大事。

body {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -o-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

上記の様にbodyタグに「-webkit-text-size-adjust: 100%;」などの魔法を書き込むのを忘れると文字が大きくなりレイアウトが崩れて大変なことになってしまいます気をつけましょう。(自分への戒め)

ユナイテッドジュエリー公式サイトはこちら

記事:清原一馬

コメントを書く

日本語が含まれない投稿はスパムとなります。