2013年9月9日月曜日

スマホサイト制作のポイント

よく忘れるのでMEMO

スマホサイト制作においてブラウザのアドレスバーを非表示にする。

<script type="text/javascript">
function hideAdBar(){ setTimeout("scrollTo(0,1)", 100);}
</script>

</head>

<body onLoad="hideAdBar()" onOrientationChange="hideAdBar()">

あとスマホ横向きの制御は幅479pxで行う。
480px(iPhone3.5インチ)では、大柄になって馬鹿っぽいくなるので。
iPadは、横にした際に、780pxで制御がちょうど良い?
横にした際に、両端に空スペースができる方が縦表示部分が大きくなるので…。

−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
アイコン設定

ホームのショートカットに表示されるアイコンの作成について見ていこう。画像のサイズは正方形で作成する。iPhoneの場合、過去の端末であるiPhone 3G /3GSは57×57px、Retinaディスプレイを搭載したiPhone 4/4Sは114×114pxとなっている。

<link rel="apple-touch-icon" href="img/apple-touch-icon.png" />

apple-touch-iconを指定した場合、iPhoneではアイコン画像に自動的に光沢処理が行われる。光沢をつけたくない場合は、rel属性の値にapple-touchiconではなく、apple-touch-iconprecomposedを指定

<link rel="apple-touch-icon-iconprecomposed" href="img/apple-touch.png" />


【参考】
https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW3




0 件のコメント:

コメントを投稿