技術と経験で、価値のあるホームページ制作を。ホームページ制作を通じて、お客様に利益をもたらすことを追求します。

技術と経験で、価値のあるホームページ制作を。ホームページ制作を通じて、お客様に利益をもたらすことを追求します。

ブログ

HOME > 花のやブログ > PCサイトをスマホで表示する時に気をつけたい3つのポイント
2014/06/01HTML/CSS

PCサイトをスマホで表示する時に気をつけたい3つのポイント

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

今回はスマートフォンで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だけでも大変なのにスマホ特有のバグとなると正直ウンザリです・・・。
結局スマホサイト設計しろよっていうのが一番なんですかね・・・。

hanap

書いた人:hanaoka

林業高校卒業をしてITに進んだ稀有な例です。
Webディレクターとして皆様のお悩みを解決します。Web制作とガジェットが好きです。特技は少年ジャンプを縦に裂くことです。
facebook:https://www.facebook.com/masakazu.hanaoka

人気記事ランキング

株式会社 花のや
〒460-0011
愛知県名古屋市中区大須4-1-79 第2ハヤシビル 3F

花のやについて

お仕事のご依頼やご相談は、下記の電話番号
または、メールフォームよりお問い合わせください。
TEL.052-251-7090 / FAX.052-251-7092

お問い合わせ