PCページがスマートフォンやタブレットで崩れているときの対策まとめ
この記事は約8分ぐらいで読めます
- 2015年08月10日
- まとめる
- Webデザイン Web制作 トラブルシューティング 解説
なんか「これ2015年の記事だよね？」って言われそうですがw
このスマホ全盛時代にPCサイトしか用意していないという状況はあまり良くないのですが…良くないのですが、PCサイトしかないこのブログでそれがいい悪いと言っても仕方ないのでそこは置いておきます。
ただ表示したいだけでも微調整は必要なときがある
で、実際にスマホ版を用意していないWebサイトであったとしてもPCサイトは大抵スマートフォンの画面サイズに合わせた形で普通に表示されるわけですが、サイト、端末によっては微妙に崩れたりしてしまっていることもあると思います。もうリニューアルする意義がない、もしくはいずれするけど今とりあえずこれだけは直したい！というサイトを持っている人のために症状別に解説、対処法を紹介したいと思います。
フォントが変わる
まずは凡ミス的なものから。PCサイトではゴシック体で表示されていたものが、スマートフォンで見ると明朝体（とか丸ゴシックとか）で表示されるという場合ですね。
ただbody内のp要素にテキストを入れただけのものをブラウザーに表示させた場合、例えばPCブラウザーでは大抵ゴシック体で表示されますが、新しめのiPhoneでは明朝体、Androidの一部の機種では丸ゴシックで表示されたりもします。これはフォントを指定しなかった場合に表示されるデフォルトのフォントがブラウザーやOSごとに違うからです。普通はフォントの指定は何かしら行うと思うのでこういう事態に実際にあうことはそうないと思いますが、PCの表示結果を見ながら作っていて、指定の抜けに気づかないということもあるかもしれませんねー。
body {
font-family: Meiryo, sans-serif ;
}
というわけで、意図しないフォントで表示されることがないようにちゃんと特定のフォントを指定しましょう。serifって書いてもそもそも明朝体フォントがなくてゴシック体が表示されるとかありますしね…（それでも代替書体の指定は必要だと思いますけど）。
少し古い記事ですが、以下の記事ではOSごとのデフォルトフォントを調べた結果が書かれてます。これ見ると根本的に、Safari（Apple）が明朝基準であることとかわかりますね（だからiOSもそうなってるということかな）。
画面からコンテンツがはみ出す
ブラウザーに表示させた時点でWebサイト全体が画面に入りきっておらず、横スクロールが発生しているような場合。
スマートフォンのブラウザーはデフォルトのviewportが980px（古いAndroidだと800pxというのもある）なので、それよりも大きい横幅で作られたWebサイトを表示するとコンテンツの右側は画面からはみ出した状態になります。
幅の広いWebサイトをスマートフォンの画面ぴったりに表示させるには、viewportをWebサイトのコンテンツの横幅と同じサイズに設定すればオッケーです。1200pxのコンテンツ幅を持っているならviewportのwidthを1200にするということです。
<meta name="viewport" content="width=1200, minimum-scale=0.1">
ちなみにもっと大きな（1280より大きい）viewportのwidthを有効にするには他にもデフォルトの最小縮小サイズを変更しなければいけないのですが、その辺についてはすごく古い記事ですが以下に詳しいです。
文字サイズが変わる
次に、スマートフォンでのみ文字が大きく表示されてしまったりするとき。
PCサイトでは問題なく表示されている文字が、スマートフォンでは大きく表示されたり不揃いになってしまうことがあります。
これはなぜ一部だけこうなってしまうのか私も発生条件含めて正直よくわかってないのですが、部分的に文字サイズが大きくなってしまう問題は他の場合でもよく起きましたよね。Chromeでremが大きくなったり、ランドスケープとポートレートを切り替えた時に文字サイズが変わっちゃったり。文字サイズを相対指定しているときに他の要因が影響して起きがちな印象です。
body {
-webkit-text-size-adjust: 100%;
}
-webkit-text-size-adjustプロパティーの値をauto以外に設定することで…特に100%に設定することで、他に問題の起きない形で意図しない文字サイズの自動調整が起きないようにすることができます。Androidの場合はこれだけではダメで、有効にするためにHTML側のviewport指定にscale系のいずれかを指定することが必要です。以下の二つの記事でこの辺りのことが詳しく解説されています。
androidでブロック要素のテキストが途中で折り返してしまう
display:blockが指定されている要素（非フレージングなフローコンテンツ、つまりブロック要素）は通常親要素に対して自動的に100%の横幅を持つようになっていますが、これが中途半端に横幅設定されてしまう問題です。
これはそもそもの原因としては、Android端末の一部に設定されている自動折り返し設定というものが有効になっていることによります。この設定を利用者側でオフにしてもらえば通常通りの見た目になるんですが、できればWebサイト側で対応したいですよね。ちなみにこの半端な折り返しの長さはviewportの広さに関わらずCSSピクセルの幅に合わせられているような感じがします。だからスマートフォンサイトではこれが起きないのですねー（っていうか、じゃあどういう場合にありがたいんですかね）。
p {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQIW2NkAAIAAAoAAggA9GkAAAAASUVORK5CYII=") ;
}
対象要素の背景に背景画像や背景色を設定すると、その要素を自動折り返し設定の対象から外すことができます。これはbackground-color、background-imageプロパティーの有無ではなく実際に描画されているかどうかであるらしく、transparentやアルファ値、opacityを0にしてしまうとダメなんですが、透明の画像を設定すれば問題なさそうです。
この問題については以下の記事が詳しいです。
おわりに
素直にスマートフォン対応しろよって話ではあるんですが、とりあえずスマートフォンサイトを用意するまで、リニューアルのタイミングまで、もうこのままでいい、などなどいろんな状況が実際にはありますよね。
これらのコードを現状のWebサイトに入れ込むだけで、元を改変せずにとりあえずは不格好なところを整えられると思います。各指定の詳しいところを知りたい場合はそれぞれの記事を参照してみてくださいね★
また、これはあくまでPCでは完璧に表示されているPCサイトをスマートフォンで見た場合に崩れることの普遍的な対処法です。もしこれでも対応できないよくある崩れを知ってる人は教えてもらえると幸いですっ！