スマホサイト対応するときに困らないためのコードまとめ

スマホサイト対応するときに困らないためのコードまとめ

スマホサイト制作をするのってCSS3やらHTML5やらほぼほぼ使えるので、結構楽なんですが、実は困ることって意外に多くないですか?僕の今までの経験で困ったこととその解決策をまとめてみようかなと思います。

Ads

画像が画面からはみ出してしまう問題

画像がスマートフォンの画面からはみ出してしまっているのを画面サイズに合わせるようにするCSSのコードです。

img {
	max-width : 100% ;
	height : auto ;
}

スマートフォンを横にしたときに文字さのサイズが変わってしまう問題

デフォルトのままだとスマートフォンを縦にしている時と、横にした時で文字のサイズが変わってしまいます。
それを、縦にしたときも横にした時も同じサイズにするCSSコードです。

body { -webkit-text-size-adjust : 100% ; }

opacityを使っていると画像やボタンが一回のタップで反応しなくなる問題

ボタンや、リンクのimgなどでhover時にopacityで少し半透明にする手法があります。特にPCサイトで良く使われる手法です。ですが、SPとくにiOSの場合に一回のタップだと反応しないバグがあります。

アンチパターン

これだと先ほども書いたように一回のタップだと反応しません。ユーザビリティの観点からも良くないので改善したいですね。

a img{
	opacity: .7;
}

a,button{
	display: block;
	width: 200px;
	height: 60px;
	line-height: 60px;
	background: #000;
}
a:hover,button:hover{
	opacity: .7;
}

SPの方はhover自体いらない

特に画像の場合はhoverの状態はいらないです。ボタンのほうもhoverの状態を無くしても問題ないでしょう。それかopacityではなく色を変化させるなどの対応の方が良さそうです。

a,button{
	display: block;
	width: 200px;
	height: 60px;
	line-height: 60px;
	background: #000;
}
@media screen and (min-width:768px){
	a img{
		opacity: .7;
	}

	a:hover,button:hover{
		opacity: .7;
	}
}

参考
結構緊急リンクが飛ばない iOS 8.4.1からCSS :hoverも1クリックカウントっぽいSafari | WEBスキルアップ君

jsスクロールイベントがうまくいかない問題

スクロールによって処理を分けたいときによく問題になります。
よくあるのがheaderをfixedで固定にしているけど、下にスクロールしているときは隠れて、上にスクロールするとスライドインするなんてことをやりたいとかですね。
iOSだとscrollイベントでは思ったような動きをしてくれません。

参考
スクロールイベント(onscroll)のブラウザ差分について – au開発者情報Blog

scrollイベント アンチパターン

この書き方だとiOSでは動きがカタカタします。

jQuery(document).ready(function($){
	$('.hoge').on('scroll', function(event){
        なんか処理
    });
});

touchmoveで対応できるかも

大体のスクロール問題はこれで解決できると思います。これやってもうまくいかない場合はごめんなさい・・・

jQuery(document).ready(function($){
	$('.hoge').on('touchmove scroll', function(event){
        なんか処理
    });
});

参考
オンズ » 【jQuery】iPhone や Android の反応速度向上のために「タッチイベント」を活用する方法。

form周りの初期デザインがジャマ問題

iOSでは角丸やグラデーション、ドロップシャドウなどの初期スタイルが付いています。オリジナルのデザインにする場合などに結構邪魔だったりするのでリセットすると扱いやすくなります。
base.cssやreset.cssに含めるといいと思います。

input,textarea,select {
    -webkit-appearance: none;
}

iOSでoverflow: scroll;を使うと滑らかに動かない問題

よくあるのがdrawer内でスクロールしたときですね。画面よりはみ出た場合スクロールさせたいのですが、position: fixed;など使っていてスクロールできないので、コンテンツ内でoverflow: scroll;させたりします。Androidでは想定通りの動きなのにiOSでは滑らかにスクロールしてくれません。

そんな場合は下記コードで一発で解決できます!

	.hoge{
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
	}

おまけ viewportの設定

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">

詳しくはこちらで

おまけ 高精細(Retina)ディスプレイへも対応

今更だけどretina対応を考えてみた[簡単] | Cntlog

http://blog.cntlog.net/?p=691

http://blog.cntlog.net/?p=691

たぶんここの記事が一番わかりやすいです。

僕は基本的に「読み込ませる画像の大きさを半分にする」で対応しています。というか、デザインカンプを作る時点で320pxではなく640pxで作るので。おのずとこうゆうやり方になってしまうかなと。

ただ、あまり重要ではない画像についてはretinaに対応してなくてもいいですね。最近この辺を怠っていたので再度戒めます。

いいなと思ったらシェアお願いします

同じタグで検索

Ads

同じカテゴリーの記事

ページの先頭へ