資料はこちら:
メジャーな CMS には iPhone や Android での表示用のための組み込みの機能や、プラグインがあるかもしれません
でも理屈を知っておくと役に立つこともある(と思う)
※特徴の多くは Android デバイスも同様と考えてよいと思います
※お詫び: iPad よく知りません
サーバ側で、クライアントの送信してくる User-Agent ヘッダを見て判断する
User-Agent に応じて異なった処理(たとえば異なる CSS のロード)をする
$ua = $_SERVER['HTTP_USER_AGENT'];
if (preg_match('/iPhone|iPod|BlackBerry|Android/', $ua)) {
...
} else if (preg_match('/iPad/', $ua)) {
...
} else {
...
}
User-Agent に応じて HTML または CSS の読み込み元を切り替える
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} iPhone|iPod|BlackBerry|Android
RewriteRule (.*)style.css$ $1mobile.css [L]
ブラウザ側の機能で自身の環境に合わせる
たとえば navigator.userAgent で User-Agent を調べる
<script type="text/javascript">
function check_mobile() {
if (navigator.userAgent.search(/iPhone|iPod|BlackBerry|Android/) == -1)
return;
var a = document.getElementsByTagName('body')
for (var i = 0; i < a.length; i++) {
a[i].className += (a[i].className ? ' mobile' : 'mobile');
}
}
</script>
<style type="text/css">
html.mobile p {
...
}
</style>
<html onload="check_mobile()">
ただし JavaScript は無効化されているかもしれない
新しい CSS の Media Queries を使うこともできる
例) デバイスの幅が 480px 以下のときモバイル用の、481px 以上のときには PC 用の スタイルを使用する
@media (max-device-width: 480px) {
/* for mobile */
body { background-color: red; }
}
@media (min-device-width: 481px) {
/* for PC */
body { background-color: blue; }
}
以下のような PC ページ(※幅が 750px に指定されています)を表示する場合、
iPhone の場合、デフォルトでは幅 980 pixel を基準に、以下のように縮小表示してしまう
並べると、こう
多くの場合、文字は小さすぎて読めなくなってしまい、また余白もできる。
小さい文字を読むためにズームしながら(そして左右にもスクロールしながら)のブラウズはあまり快適でない
↓
ズームなし、横スクロールなしで読めるように
HTML の header の meta 要素に viewport を設定する
<html> <head> <meta name="viewport" content="width=device-width"> ...
これで画面幅の基準がデフォルトの 980 pixel から、デバイスの幅(iPhone では 320 pixel) になるので、左右の余分な空白は除かれる
ただし、これでもまだ文字は小さいので、縮小表示はしないように改めたほうがよい
viewport 指定に initial-scale=1.0 も加える
<meta name="viewport" content="initial-scale=1.0,width=device-width">
文字は読めるサイズになったが、画面に収まらなくなった。
しかしこれを基準に、レイアウトの固定部分を排除して、画面に収まるように調整していく (後述)
モバイルアクセス時のスタイルを差し替えると以下のようになる
ただし縦→横の回転時にズームされることでレイアウトが乱れてしまうことがある。
ズームが一切不要な場合には以下のようにすればレイアウトはきれいになりやすい。ただし小さな文字が読みにくい場合などにもズームできなくなってしまうので注意。
<meta name="viewport" content="width=device-width,maximum-scale=1.0,minimum-scale=1.0">
なお、viewport の設定は JavaScript や CSS ではできないため、サーバ側で(PHP 等 で)切り替える必要がある。
ただし、PC 向けの表示には害がなさそうなので、常時記述していてもよいかも?
表示できる情報は少ない
→ 簡潔に、重要な情報を上部に
冗長なテキストは overflow:hidden で追い出して画像に差し替えなど
#blog div.navigation .prev, #blog div.navigation .next {
margin: 10px 20px 5px;
display:inline-block;
height:20px;
width:20px;
overflow:hidden;
}
#blog div.navigation .prev {
background:url(../img/arrow_left.png) 0 0 no-repeat;
}
#blog div.navigation .next {
background:url(../img/arrow_right.png) 0 0 no-repeat;
}
#blog div.navigation .next a, #blog div.navigation .prev a {
height:0;
width:0;
padding-left:20px;
}
画面幅より大きな画像は画面幅までに縮小
.entry img {
max-width: 100%;
height: auto;
}
指先のサイズを基準にボタンやリンクテキストのサイズを調整する
→ 押しやすいように、押し間違えないように
ナビゲーションのボタン化:
div.navi ul li a {
display:block;
border: 1px solid #d9d9d9;
margin: 5px;
padding: 5px 10px;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
background:url(../img/pt_arrow_m.png) 95% no-repeat;
text-decolation: none;
}
※ border-radius 系は角丸用。格段にそれっぽくなる
既存サイトのスマートフォン対応、みたいな案件も今後増えていったらいいな、などと思っています
iPad の話はほとんどなくてスミマセン
完全に余談ですが、この資料は HTML5 で書きました。
文法的には。