iPhone対策 | HTML5+CSS3でサイトを作ってみる。

(※ このページには古い情報が含まれている可能性があります。)

■ iPhone対策　その1

iPhoneサイトのサンプルを見るには、http://www.nemuchan.com/sp/へiPhoneでアクセスしてみてください。
実験的に作っているのでリンク切れなどに関してはご容赦を・・・(^ ^;)

iPhoneサイトへ振り分ける

PCでアクセスしたらPCサイトへ、iPhoneでアクセスしたらiPhoneサイトへ誘導する方法です。 Javascript, PHPでも実現出来ますが、今回はhtaccessで振り分けます。

サンプルコード

<IfModule mod_rewrite.c>			
RewriteEngine On				
RewriteCond %{HTTP_USER_AGENT} iPhone		
RewriteCond %{QUERY_STRING} !mode=pc		//PC or iPhoneどちらで見たいか選べる(※1)
RewriteRule ^$ http://www.nemuchan.com/sp/ [R]	
</IfModule>

※1)
ユーザーにPCサイトを見たいかiPhone用のサイトを見たいか選んでもらいたい場合、「PCサイトはこちら」などのボタンをつけ該当URLの最後に"?mode=pc"を付ける。この場合、http://www.nemuchan.com/?mode=pcでiPhoneからPCサイトに行ける。

iPhone基本仕様

基本的にhtml5＋CSS3で設計していきます。html5の構文に関してはこちらで説明しています。

iPhone基本仕様リスト
ページサイズ	320px×480px
文字サイズ/行間	文字サイズ：14px～16px、行間1.4px～1.6px

viewport

iPhoneの画面サイズ用の指定をmetaタグ内に記述します。

基本的な書き方

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0," />

viewportに記述できる値
width	viewportの横幅（デフォルト:980px）
height	viewportの縦幅（デフォルト:自動）
initial-scale	ページ読み込み時の拡大率（デフォルト:1.0）
user-scalable	ユーザーによる拡大操作の許可（デフォルト:yes）
minimum-scale	拡大率の最小（0.25）
maximum-scale	拡大率の最大（1.6）

値を複数指定する場合は要素と要素の間をコンマ(,)で区切るということだが、(;)でもいい模様。。
widthの値は"device-width"にすることで、デバイスの横幅に自動的にサイズを合わせてくれるので、 iPhoneを横にしても縦にしても画面サイズがフィットする。

head要素内の記述例

0)  <!DOCUTYPE html>
1)  <html lang="ja">
2)  <head>
3) 	<meta charset="utf=-8" />
4) 	<title>タイトル</title>
5) 	<meta name="viewport" content="width=device-width" />
6) 	<meta name="format-detection" content="telephone=no" />
7) 	<link rel="apple-touch-icon" href="イメージ画像のパス" />
8)	<!--link rel="apple-touch-icon-precomposed" href="イメージ画像のパス" /-->
9) 	<link rel="stylesheet" href="スタイルシートのパス" media="screen" />
10) </head>

head要素内解説(基本的なものは省略)
6) 電話番号無効化	電話番号など連続した数字に自動的にリンクを貼らない
7) ホーム画面用アイコン (光沢有りの場合)	ホーム画面用のアイコンを指定。114px×114px以上のPNG形式で作成。この場合光沢や角丸は自動生成される。
8) ホーム画面用アイコン (光沢無しの場合)	この場合光沢は自動生成されない。

またホームアイコンは、記述をせずに設置することもできる。その場合は画像ファイル名を
"apple-touch-icon.png(光沢ありの場合)"
"apple-touch-icon-precomposed.png(光沢無しの場合)"
にし、ルート階層に置いておく。

ページの表示領域を広げるには

URLの表示領域を隠す為のスクリプトです。


--[ html ]-----------------------

<script type="text/javascript" src="jsファイルへリンク">

--[ js ]-------------------------

window.addEventListener('load',
	function(){
		setTimeout(function(){
			scrollTo(0,1);
		},100);
	},
false);

縦持ち、横持ちによって違うスタイリングをしたいとき

iPhoneを縦で見たときと横で見たときのスタイリングをそれぞれ変えたいときはjQueryを利用するとよい。まずはjQueryのHPからソースをダウンロードし、jsファイルとして適当に名前をつけて保存します。ファイルリンクの仕方は通常通りヘッダにコードを書き込めばOKです。

<script type="text/javascript" src="ダウンロードしてきたjsファイル.js"></script>

次に以下のコードをjsファイル、CSSファイルに書き込みます。


--[ jsファイル ]-----------------------

//縦持ちと横文字の切り替え。.jsファイルとして適当に名前をつけてよい。
function switchOrientation(){
	var orientation = window.orientation;
	if(orientation == 0){
		$("body").addClass("portrait");
		$("body").removeClass("landscape");
	}else{
		$("body").addClass("landscape");
		$("body").removeClass("portrait");
	}
}

$(document).ready(function(){
	switchOrientation();
	var agent = navigator.userAgent;
	if(agent.search(/iPhone/) != -1){
		window.onorientationchange = switchOrientation;
	}else{
		window.onresize = switchOrientation;
	}
});

--[ CSS ]-------------------------

.portrait #ID名	 {}	//縦から見たときは.portraitというクラス名が付く
.landscape #ID名 {}	//横から見たときは.landscapeというクラス名が付く

■ iPhone対策 その1