iPhone用にサイトの幅と画面の幅を合わせるには
最終更新日 2015-10-28 0:41
WordPressなどのように動的に出力するサイトであれば、スマホでアクセスすると、スマホ用の表示を出力してくれます。が、私のように自作ブログや、MovableTypeや、企業サイトなど静的なページで作成したサイトで、スマホ用やパソコン用に表示させるにはどうしたら良いのでしょうか？
Sponsored Link
このページの目次
- iPhone6 ディスプレイの解像度は？
- スマホ用サイトの横幅は320
- viewportで横幅ピッタリ
- パソコンではどう表示されるか
- viewportの幅の指定 一覧表
- 画像やテーブルがはみ出てしまう場合の対策
スマホサイトの幅
iPhoneのディスプレイの解像度
iPhone6のディスプレイの解像度は、横750ピクセルです。ところが、
ブラウザでは750ピクセルではなく、980ピクセルとして表示させようとします。
<img src="./ajisai.jpg" width="750" alt="あじさい">
iPhone6のディスプレイの横幅と同じ、750ピクセルの画像を表示させると、このように右横に空白ができてしまいました。
スマホ用のサイトの幅
一般にスマホ用のサイトを作成・表示するには、横320ピクセル、縦480ピクセルで表示するのが決まり(？)になっています。
ところが、普通にページを作成すると、幅980ピクセルで表示されてしまいます。
こちらは、■色の画像を幅320ピクセルで表示させたものです。
本来であれば画面の横幅ピッタリに表示して欲しいのに、小さく表示されてしまっています。
今度は画像の幅を980ピクセルにした場合です。
今度は横幅がピッタリになりました。
じゃあ、スマホ用サイトには幅980ピクセルに合わせて作成すればいいのか、というと、いろいろな不具合が出てきます。
不具合 その1 文字が小さくなる
こちらは、画像の幅を980ピクセルに指定して作成したページをiPhoneで表示したものです。
画像は横幅ピッタリになりましたが、文字がすごく小さくなってしまいました。
<img src="image.jpg" width="980" />
フォントのサイズを大きくしてやればいいような気がしますが、フォントを大きくすると今度はパソコンで表示した時にフォントが大きすぎてしまいます。
viewport を使う
ではどうすればいいのか、というと、「METAタグ」の「viewport」でブラウザの解像度を擬似的に指定することができます。
たとえばこの指定がないと、スマートフォンでは幅980pxで表示してしまいますが、300pxや400pxなど、200～10000pxの間で指定することができ、強制的にその幅でページを表示させることが出来ます。
<html>
<head>
<title>スマホでの見え方</title>
<meta name="viewport" content="width=300" >
</head>
<body>
上のように指定した場合、ブラウザの表示領域は300pxとして扱われます。
device-width
実際には数値を指定するのではなく、「device-width」という値を指定します。これは各スマホのデフォルトの表示領域に合わせる。という設定で、iPhoneは380pxになります。
<html>
<head>
<title>スマホでの見え方</title>
<meta name="viewport" content="width=device-width" >
</head>
<body>
ところがこれが少しクセモノで
- iPhone5:320px
- iPhone6:380px
- Xperia Z:360px
と、それぞれ微妙に違うんです。これがどういうことかというと・・・
iPhoneの場合、width=device-width を指定し、幅380pxの画像を表示させると、ディスプレイの幅とピッタリになります。
ところがアンドロイドだと、device-width = 360px であることが多く、このように380pxの画像を表示させると、このように隙間ができてしまいました・・・。
各スマホのdevice-widthの値がどれくらいかは、SCREEN SIZ.ESで調べることができます。
これによると、iPhone6は 375px になっていますが、実際に表示させてみると、380pxのよう。
サンプル
- content=device-width にした場合
- 画像のwidthを360px
↑アンドロイドだと画像がピッタリ - 画像のwidthを380px
↑iPhoneだと画像がピッタリ
- 画像のwidthを360px
- content=380px にした場合
- 画像のwidthを360px
↑iPhoneでもアンドロイドでも画像の隣に隙間ができる - 画像のwidthを380px
↑iPhoneでもアンドロイドでも画像がぴったり表示されるはずです
- 画像のwidthを360px
解決策
この厄介な端末ごとに違う、表示領域の問題を解決するには、以下の2つの方法があります。
width=380px などで統一する
1つは、content="width=380px" のように、数値で指定してしまう方法。
これだと、iPhoneでもアンドロイドでも強制的に380ピクセルとして表示するので、端末ごとの見え方の違いがなくなります
画像の幅を100%にする
私が使用している方法はこれ。画像の幅を数値ではなく、100%にすると、ディスプレイの幅で表示してくれます。
例えば・・・
<img src="tomato.jpg" width="100%" alt="トマト">
この時、高さ( height )は指定しないと、ブラウザ側で適切な高さに表示してくれます。
この手法の利点としては、いろいろな幅の画像が混じっていても、すべて100%にしてくれる点です。
すべての画像が380pxであればいいのですが、中には200pxとか500pxとかの画像が混ざっていても、width=100%だと、ディスプレイの幅(ブラウザの幅)で表示してくれます。
パソコンでは100%にしたくない
ただし、これだとパソコンでも画像の幅が100%で表示されてしまい、すごく大きな画像になってしまう可能性があります。
そんな時は、スタイルシートでスマートフォンだけ100%にする。ということも可能です。
CSSで、以下のように指定します。
@media only screen and (max-device-width : 480px) {
/* スマートフォンだけ以下を適用 */
img {
width:100%;
}
}意味としては、表示領域が480px以下で表示する端末は、以下のスタイルシートを有効にする。という感じ。
パソコンやタブレットには適用されません。
ただし、上の記述だとすべてのIMGタグの画像が100%になってしまうので、
@media only screen and (max-device-width : 480px) {
.gazou {
width:100%;
}
}のように、クラスで指定した方がいいでしょう。
以下、サンプルです。
- content="width=380px"
- IMG width="100%"
viewportの幅のまとめ
ここでまとめると、以下。
| プロパティ | 値 | ||
|---|---|---|---|
| width | 表示領域の幅 | device-width | 端末の横幅 (iPhone6では380px) |
| 数値 | 200～10000 (デフォルトは980) |
||
| 例 | width="device-width" width="480" |
||
「 width 」プロパティには、端末の横幅に合わせる「 device-width 」以外にも数値を指定することもできます。
数値を指定することで、320ピクセル以外の幅にすることができます。
テーブルがはみ出る
画像だけでなく、テーブルタグがあると場合によってはおかしな表示になってしまうことがあります。
width="device-width"にして、テーブルの幅を500ピクセルにして、iPhoneで表示した場合、このようにはみ出てしまいました。
テーブルの幅も100%にする
テーブルの場合も、幅を width="100%" にしておけば、パソコン、スマホ、どちらも幅をブラウザの幅と同じにしてくれます。
<tabel width="100%">
ただし、こちらのページのようにテーブル内の文字数が多すぎて、どうしても380pxなどスマホの表示領域では狭すぎる場合は、テーブルに合わせて小さく表示されてしまいます。
こういった場合は、DIVタグなどで囲ってやり
overflow:scroll
のように、はみ出す部分に関しては、横スクロールできるようにしてやります。
<div style="overflow:scroll> <tabel width="700"> <tr><td>あいうえお</td><td>かきくけこ</td></tr> </table> </div>
横スクロールさせたものがこちらになります。テーブルの部分が横スクロールできていると思います。
CSSだけでパソコン用・スマホ用を表示させる
ここで、先ほどのパソコンとスマホでCSSを分けることについて、もう少し詳しく紹介したいと思います。
こちらは当サイトをパソコンで表示させた様子。
パソコンで表示した時は、IMGタグで指定した横幅で表示させます。この画像で言うと、300pxですね。
スマホで表示した場合は、画像がほぼ画面の横幅いっぱいに表示されています。
このような動的なページやJavaScriptを使わないと実現できないようなことも、viewportと、CSSだけで実現させることができます。
@media screen and (max-width: 380px)
最新のCSSでは、「～だったら適用させる」というような指定ができるようになりました。
以下は、表示領域内が380px以下であれば、カッコ{ }内で指定したスタイルを適用させる。という意味になります。
@media screen and (max-width: 380px){
img {
width:100%;
}
}
この場合は、表示領域が380px以下の場合は、IMGタグの横幅を100%にする。という意味になります。
で、CSSで指定した場合、IMGタグ内のwidthプロパティで横幅を指定している場合でも、CSSで指定した値が優先されます。
ここがポイントです。つまり、色々なサイズの画像が入り混じったページでも、表示領域が380px以下(つまりスマートフォン)の場合は、上のCSSだけですべて100%の幅にしてくれます。
高さは指定しない
ただし、横幅は一律一定ですみますが、高さは画像によってまちまちになると思います。
なので、高さの指定はIMGタグ内、CSS内でも指定しないでおきます。高さを指定していない場合、ブラウザは横幅に合わせた高さで自動的に表示してくれます。
<img src="image.png" width="300" alt="画像" />
上のタグのように「 height 」を指定していなくても、画像はちゃんと縦横比が適切な表示をしてくれます。
拡大縮小させない
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" >
| width=○ | 横幅を指定した数値に合わせる device-widthを指定すると画面に合わせる |
| initial-scale=1 | 倍率。1を指定すると等倍 |
| maximum-scale=1 | 倍率。最小。ここで指定した値の方が、上記より優先される |
| user-scalable=no | 拡大・縮小できるようにするか |
この中でも実際には、maximu-scaleが最優先されるようで、このmaximu-scaleを指定すると、拡大も縮小も出来なくなり、initial-scaleを指定してもmaximu-scaleの値になってしまうようです。
またmaximu-scaleを指定しないと、widthを指定しても有効にならないっぽいです。
maximum-scaleを0.5にしたところ
initial-scaleを2にしたところ
maximum-scaleを0.5にし
initial-scaleを2にしたところ
320pxにするとはみ出す
さて、では、width=device-widthと指定し、幅320pxの画像を貼れば、画面にぴったりの画像を表示させることが出来るのでしょうか？
青の画像は、実際は300px。
よく見ると、青の画像の左右に隙間が出来ています。
青の画像の幅を320pxにすると、このようにスクロールしないと全体を表示できないようになりました。
では、実際には幅は、320pxではなくて300pxなのでしょうか？
<style type="text/css"> <!-- body { margin:0px; } --> </style>
この場合は、スタイルシートでBODYのmarginを0pxに指定しておくと、画像の両脇に隙間が出来ずに、幅を320pxにしたときに画面にぴったり納めることが出来ます。
左の画像は、スタイルシートでBODYのmarginを0pxで指定したものです。
青い画像の幅は320pxで指定。
その下の青い画像は、200pxで指定。
その下の写真は、300pxで幅を指定したところです。
なにも指定しなかったときに比べ、ずいぶんスマートフォンで見やすい表示に出来ることが出来ました。
拡大縮小は出来なくなりましたが、逆にスクロール時に左右にぶれないので、スクロールもしやすくなりました。
さて、同じサイトをPCで表示させるとどうなるのでしょうか。
左は、パソコンで表示させたところです。
meta name="viewport"
のタグは、パソコンのブラウザは無視してくれるため、iPhoneから見た場合のみ、サイトの幅を画面ぴったりに合わせてくれるように指定できるのです。
最終更新日 2015-10-28 0:41
Sponsord Link
【 八重 】 2017/01/24 22:37:04
記事、とても参考になります。
「『maximum-scale』が『initial-scale=』よりも優先されるの、なんでだろう？」といった流れになっていたので、気付いたことを――
「minimum：最小」ではなく「maximum：最大」だからかなと。
最大を0.5に指定しているのだから、2倍表示させたくても0.5倍表示されますよね、おそらく。
iPhone閲覧時、横幅の指定がきちんとなされていないのか微拡大されて右端がハミ出ている（縮小して合わせ直すことは可能）サイトに出くわすことが多くて、不具合か何かかと思って検索してみたらこの記事を見つけました。
近いうちに、ホームページのCSSを直そうと思います。
最終更新日 2015-10-28 0:41 / 投稿日：2011-12-20
| 
| 
| 
