一緒に悩み、考える。
つくるだけでなく、
そのあとの物語も、ともに。

どんな会社もサービスも、それぞれにストーリーがあります。
花のやはそれをサポートしながら、お客様の成長を隣で見ていたいのです。

一緒に悩み、考える。
つくるだけでなく、
そのあとの物語も、ともに。

どんな会社もサービスも、
それぞれにストーリーがあります。
花のやはそれをサポートしながら、
お客様の成長を隣で見ていたいのです。

ブログBLOG

  1. 名古屋のホームページ制作会社 花のや
  2. 花のやブログ
  3. PCサイトをスマホで表示する時に気をつけたい3つのポイント
2014/06/01プログラミングHTML

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

この記事を書いた人:hanaoka

村生まれ村育ちWebディレクターです。 2014年に株式会社花のやを設立。以後ディレクションと営業を兼務しています。 学歴コンプレックスをバネに日夜戦っています。

LINEで送る
Pocket

人気記事ランキング

お問い合わせ

Webサイト制作・その他お仕事のご依頼、
ご相談についてお気軽にお問い合わせください。

  • ホームページ制作で”補助金・助成金”使えます!
  • WEBに関する無料個別相談会
株式会社 花のや
〒460-0008
愛知県名古屋市中区栄2-14-5 山本屋本店栄ビル7階

花のやについて

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

お問い合わせ