iPhoneフレンドリーなサイトにするための10の方法


20100304-03

10+ useful code snippets to develop iPhone friendly websites」というエントリーよりiPhone/iPod touch用サイトを作成する際の10のTipsのご紹介。

サーバーサイドでの振り分け処理や、画面の向きの取得方法などなど、いつか使うかもしれないのでメモ的にエントリーです。

詳しくは以下

IT/WEB業界への転職なら求人サイトGreen

JavaScriptでリダイレクト

iPhone/iPod touchの場合に専用のページにリダイレクトさせます。サーバーサイドのスクリプトを使用できない場合に。

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
if (document.cookie.indexOf("iphone_redirect=false") == -1) {
window.location = "http://m.espn.go.com/wireless/?iphone&i=COMR";
}
}

PHPでリダイレクト

リダイレクトさせるのは上記と同じですが、こちらはPHPを使用しています。

if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) {
header('Location: http://yoursite.com/iphone');
exit();
}

viewportで画面サイズを指定する

head 要素にタグを入れるだけで、横幅を最適化する事ができます。
viewportについての説明は@ITに詳しく載っています。

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

独自アイコンの指定

以下のコードをヘッドに入れる事で、ブックマークされた際にホーム画面にアイコンを表示させる事ができます。
サイズは 57x 57pxでpng形式で保存する必要があります。

<rel="apple-touch-icon" href="images/template/engage.png"/>

自動でフォントサイズが調整されるのを防ぐ

画面の向きを変えた際に勝手にフォントサイズが調整されます。結構小さくなりすぎる場合などがあるため、変更されないようCSSで指定します。

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:none;
}

iPhoneの向きを取得

iPhoneの画面の向きを取得します。
このサンプルでは、画面の向きによってCSSを切り替えます。

window.onload = function initialLoad() {
updateOrientation();
}
function updateOrientation(){
var contentType = "show_";
switch(window.orientation){
case 0:
contentType += "normal";
break;
case -90:
contentType += "right";
break;
case 90:
contentType += "left";
break;
case 180:
contentType += "flipped";
break;
}
document.getElementById("page_wrapper").setAttribute("class", contentType);
}

iPhone/iPod touchにだけ適用するCSS

メディアタイプを指定する事でiPhone/iPod touchにだけCSSを適用させる事ができます。

@media screen and (max-device-width: 480px){
/* All iPhone only CSS goes here */
}

画像をiPhone用に最適化する

iPhone/iPod touchの画面は最大で480pxまで表示する事が可能です。480pxより大きい画像の場合、それ以上大きくならないようにします。

@media screen and (max-device-width: 480px){
img{
max-width:100%;
height:auto;
}
}

デフォルトでツールバーを隠す

少しでも画面を大きく使えるよう、初期状態でツールバーを非表示にします。

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

特殊なリンクの指定方法

電話やSMSを起動させる事ができます。

<a href="tel:12345678900">Call me</a>
<a href="sms:12345678900">Send me a text</a>

hoverを適用させる

マウスオーバーという概念が無いので、JavaScriptで指の位置を取得します。

var myLinks = document.getElementsByTagName('a');
for(var i = 0; i < myLinks.length; i++){
myLinks[i].addEventListener('touchstart', function(){this.className = "hover";}, false);
myLinks[i].addEventListener('touchend', function(){this.className = "";}, false);
}

上記のコードを追加する事で、CSSのhover属性が使用できます。

a:hover, a.hover {
/* whatever your hover effect is */
}

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

follow us in feedly