iPhoneやスマートフォンでサイトを表示させると文字が非常に小さく表示されてしまいます。そこで、画面にぴったり合わせて表示させてみましょう。
最終更新日:2015-10-28 00:41
<img src="ajisai.jpg" width="750" alt="あじさい">
一般にスマホ用のサイトを作成・表示するには、横320ピクセル、縦480ピクセルで表示するのが決まり(？)になっています。
ところが、普通にページを作成すると、幅980ピクセルで表示されてしまいます。
本来であれば画面の横幅ピッタリに表示して欲しいのに、小さく表示されてしまっています。
今度は横幅がピッタリになりました。
じゃあ、スマホ用サイトには幅980ピクセルに合わせて作成すればいいのか、というと、いろいろな不具合が出てきます。
画像は横幅ピッタリになりましたが、文字がすごく小さくなってしまいました。
<img src="image.jpg" width="980" />
フォントのサイズを大きくしてやればいいような気がしますが、フォントを大きくすると今度はパソコンで表示した時にフォントが大きすぎてしまいます。
ではどうすればいいのか、というと、「METAタグ」の「viewport」でブラウザの解像度を擬似的に指定することができます。
たとえばこの指定がないと、スマートフォンでは幅980pxで表示してしまいますが、300pxや400pxなど、200～10000pxの間で指定することができ、強制的にその幅でページを表示させることが出来ます。
<html>
<head>
<title>スマホでの見え方</title>
<meta name="viewport" content="width=300" >
</head>
<body>
実際には数値を指定するのではなく、「device-width」という値を指定します。これは各スマホのデフォルトの表示領域に合わせる。という設定で、iPhoneは380pxになります。
<html>
<head>
<title>スマホでの見え方</title>
<meta name="viewport" content="width=device-width" >
</head>
<body>
ところがこれが少しクセモノで
と、それぞれ微妙に違うんです。これがどういうことかというと・・・
各スマホのdevice-widthの値がどれくらいかは、SCREEN SIZ.ESで調べることができます。
これによると、iPhone6は 375px になっていますが、実際に表示させてみると、380pxのよう。
この厄介な端末ごとに違う、表示領域の問題を解決するには、以下の2つの方法があります。
1つは、content="width=380px" のように、数値で指定してしまう方法。
これだと、iPhoneでもアンドロイドでも強制的に380ピクセルとして表示するので、端末ごとの見え方の違いがなくなります
私が使用している方法はこれ。画像の幅を数値ではなく、100%にすると、ディスプレイの幅で表示してくれます。
例えば・・・
<img src="tomato.jpg" width="100%" alt="トマト">
この時、高さ( height )は指定しないと、ブラウザ側で適切な高さに表示してくれます。
この手法の利点としては、いろいろな幅の画像が混じっていても、すべて100%にしてくれる点です。
すべての画像が380pxであればいいのですが、中には200pxとか500pxとかの画像が混ざっていても、width=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%;
}
}のように、クラスで指定した方がいいでしょう。
以下、サンプルです。
ここでまとめると、以下。
| プロパティ | 値 | ||
|---|---|---|---|
| width | 表示領域の幅 | device-width | 端末の横幅 (iPhone6では380px) |
| 数値 | 200～10000 (デフォルトは980) |
||
| 例 | width="device-width" width="480" |
||
「 width 」プロパティには、端末の横幅に合わせる「 device-width 」以外にも数値を指定することもできます。
数値を指定することで、320ピクセル以外の幅にすることができます。
テーブルの場合も、幅を width="100%" にしておけば、パソコン、スマホ、どちらも幅をブラウザの幅と同じにしてくれます。
<tabel width="100%">
ただし、こちらのページのようにテーブル内の文字数が多すぎて、どうしても380pxなどスマホの表示領域では狭すぎる場合は、テーブルに合わせて小さく表示されてしまいます。
こういった場合は、DIVタグなどで囲ってやり
overflow:scroll
のように、はみ出す部分に関しては、横スクロールできるようにしてやります。
<div700"> <tr><td>あいうえお</td><td>かきくけこ</td></tr> </table> </div>
横スクロールさせたものがこちらになります。テーブルの部分が横スクロールできていると思います。
ここで、先ほどのパソコンとスマホでCSSを分けることについて、もう少し詳しく紹介したいと思います。
パソコンで表示した時は、IMGタグで指定した横幅で表示させます。この画像で言うと、300pxですね。
このような動的なページやJavaScriptを使わないと実現できないようなことも、viewportと、CSSだけで実現させることができます。
最新の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を指定しても有効にならないっぽいです。
initial-scaleを2にしたところ
青の画像は、実際は300px。
よく見ると、青の画像の左右に隙間が出来ています。
では、実際には幅は、320pxではなくて300pxなのでしょうか？
<style type="text/css">
<!--
body {
margin:0px;
}
-->
</style>左の画像は、スタイルシートでBODYのmarginを0pxで指定したものです。
青い画像の幅は320pxで指定。
その下の青い画像は、200pxで指定。
その下の写真は、300pxで幅を指定したところです。
拡大縮小は出来なくなりましたが、逆にスクロール時に左右にぶれないので、スクロールもしやすくなりました。
左は、パソコンで表示させたところです。
meta name="viewport"
のタグは、パソコンのブラウザは無視してくれるため、iPhoneから見た場合のみ、サイトの幅を画面ぴったりに合わせてくれるように指定できるのです。
Sponsored Link