2015年10月11日

スマホ表示のとき、ピンチで拡大縮小する1文「viewport」

投稿者: 管理者

スマホ表示のとき、ピンチで拡大縮小はできたほうがいいか、どうかでいうと、できたほうがいいと考えています。
サイトを作って、人にはじめて見せてみた際、大抵の人が、ピンチ操作をしようとするからです。
WEB標準におけるどうこうは考えないことにし、ユーザーがその操作を望んでいるのであれば、ピンチ操作はアリ!でいいんだろうと。

早速、viewportの記述

[html]
ピンチによる拡大・縮小ができる

ピンチによる拡大・縮小ができない

[/html]

レスポンシブルはブラウザの横幅に応じて表示を適切に切り替えるウェブデザインの手法。

CSSの「Media Queries(メディアクエリ)」でコントロールします。

[html]
@media screen and (max-width: 979px) {
}
@media screen and (max-width: 767px) {
}
@media screen and (max-width: 479px) {
}
[/html]

幅の切り替わるポイント(=ブレイクポイント)の例です。

注意:IE8では、メディアクエリを読み込んでくれません。
スマホ用のスタイルを先に書くと、PCブラウザのIE8でスマホ用の表示になってしまいます。

以下、メモ。

追記:画像とか使ってて、横にはみ出してします場合、こんなの書いとけばOKす

[html]
img {
max-width : 100% ;
height : auto ;
}
[/html]

追記:画像のよこにテキストが回り込んでしまう場合、こんなの書いとけばOKす

[html]
@media screen and (max-width: 480px) {
img { float : none ; }
}
[/html]

PC画面のロゴを、スマホでは大きさをコントロールしたくなることは多いでしょう

[html]
@media screen and (max-width: 480px) {
h2 {
font-size : 77% ;
margin : 1.2em 0 1em 0 ; }
}
[/html]