PCサイトをスマホで表示する時に気をつけたい3つのポイント - 名古屋でホームページ制作、ECサイト制作なら花のや 名古屋のホームページ制作、web制作会社 花のや

こんばんは、花岡です。
夏がグッと近づいてきましたね！今年の夏こそはロードバイクのイベントに参加したいです！
あとビール飲みたいです！

今回はスマートフォンでPCサイトを表示した時に起きたCSSトラブルの症状と解決方法のご紹介です。
サイト制作時にスマートフォン向けサイトを作らず、PC版のサイトをそのまま表示することがあります。
ただ「そのまま」表示するだけにしてもやらないといけないことがあるのです。

1. スマホ向けにサイト幅を指定
2. iOS向けに文字サイズをリセット
3. Androidでpタグの横幅が狭まるバグ対策

スマホ向けにサイト幅を指定

スマホでページが見やすくなるように、metaタグでviewportを指定します。
これをしておかないとスマホの画面幅を超える大きさのサイトの場合に画面が崩れてしまいます。

例えば下記の指定の場合は画面幅1400pxのサイトをスマホ向けに縮小して表示、かつピンチイン/ピンチアウト操作ができる設定です。

<meta name="viewport" content="width=1400, user-scalable=yes" />
viewportの属性の内容は以下の通り。
・width

デフォルトの幅は 980、範囲は [200, 10,000]。

つまり、viewportが指定されていない場合は、デフォルトは幅980pxでページが表示されるので、表示コンテンツが小さくなり、見にくくなる。
・height

デフォルトの高さは、width と縦横比から計算され、範囲は [223, 10,000]。
・initial-scale

ページが最初に読み込まれるときの拡大率。デフォルトではページを画面に合わせる。指定可能範囲は [minimum-scale, maximum-scale]。
・minimum-scale

ユーザーが操作可能な拡大率の下限。デフォルトは 0.25 で指定可能範囲は [>0, 10]。
・maximum-scale

ユーザーが操作可能な拡大率の上限。デフォルトは 1.6 で指定可能範囲は [>0, 10]。
・user-scalable

ユーザーが拡大縮小（ピンチイン/ピンチアウト）できるかどうかをyesかnoで設定。デフォルトはyes。数値指定も可能。その場合yesが1、noが0。
 
iOS向けに文字サイズをリセット
iPhoneでは勝手にフォントサイズを調整して、大きくしてしまう機能があるらしくそれが原因だったようです。
-webkit-text-size-adjustを使う
対処法としては、cssでbodyなどに下記を追加します。
-webkit-text-size-adjust: 100%;
この指定がデフォルトだとautoになってるのでbodyなどに追加して上書きします。
なぜnoneではダメなのか？
noneにしてしまうと、調整する機能がオフされてしまうので100%にします。

noneにしてしまうとPCで同じ画面を見た際に、ブラウザの拡大で文字が拡大されなくなります。
転載元：http://tech.nitoyon.com/ja/blog/2013/02/14/text-size-adjust/
ちなみにAndroidだけで文字がでかくなる場合は下記の指定をします。なぜか改善されます。
max-height: 9999999px;
 
Androidでpタグの横幅が狭まるバグ対策
おそらくAndroid全てではなく、一部の端末で発生するバグです。

ページの自動調整機能が原因のようですが、これについては私もよくわからないです(´・ω・`)

直面した際に調べた所、下記のCSSで治ることが分かりました。
p {background-image:url(image);}
pタグに対して空の背景スタイルを指定するようです。

詳細については下記の参考サイトを御覧ください。
転載元：http://webutubutu.com/webdesign/1555
このバグを最初に解決した方を本当に尊敬します。
 
まとめ
PCだけでも大変なのにスマホ特有のバグとなると正直ウンザリです・・・。

結局スマホサイト設計しろよっていうのが一番なんですかね・・・。