niwadesign

ホームページ制作のネタ発信

html html5 iPhone javascript

iPhone用htmlのヘッダー要素のルールβ版

投稿日:2011/3/8 火曜日 更新日:

  • viewportは幅を指定するためのもの。
  • javascript部分はアドレスバーを非表示(画面の上に隠す)にするためのもの。
  • <link rel="apple-touch-icon" href="shortcut.png">はホームアイコンを設定するためのもの。
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
	<title>タイトル</title>
	<link rel="stylesheet" href="スタイルシートのパス" type="text/css">
	<link rel="apple-touch-icon" href="画像のパス">
	<script>
		function doScroll() { if (window.pageYOffset === 0) { window.scrollTo(0,1); } }
		window.onload = function() { setTimeout(doScroll, 100); }
	</script>
</head>

ホームアイコンを作成する

ツヤツヤ処理とか角丸とかは勝手にiPhone側でやってくれるのでベタなデザインにする。

画像サイズ
57×57ピクセル(但し、正方形であれば57ピクセル以上でも可)ただし、iPhone4は114×114

画像フォーマット
gif,jpg,png,bmpいずれも可

-html, html5, iPhone, javascript
-,

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

ソースコード表示に便利なsyntaxhighlighter

ブログに貼り付けたソースを見やすくしたいため色々調べてみるとsyntaxhighlighterがいろんなサイトで使われていたのでご紹介。 DL:http://code.google.com/p/syn …

スマホサイト(iPhone)のソースコード(htmlソース)MacのSafariで確認する方法

前回ブックマークレットを使ってのソースコードの確認方法を紹介しましたが、 今回はMacのSafariを使ってのソースコードの確認方法をご紹介します。 ■iPhoneの設定 設定 > Safari > …

Chromeのディベロッパーツールを別ウィンドウにする方法

最近PCを買い替えていつものようにディベロッパーツールを使おうと開いたら、ブラウザから分離できない。。。 調べてみたら、下右に移動させるアイコンを長押しすると別ウィンドウのアイコンが表示される。 わか …

バンカーリングを1年半使ってみた感想

約1年半前にiPhone6 Plusを購入した際にあわせてバンカーリングを購入しました。 今でもPlusのサイズに馴染めず後悔しているが、バンカーリングのおかげである程度使用感がマシになった。 次回は …

no image

バンカーリング iPhone6 Plusをバンカーリングで上手に使う

読み込み中 デカすぎて現状後悔しかしていないiPhone6 Plusをバンカーリングでカバーできるかな!? Instagramで閲覧 iPhone6 Plusを購入して約1ヶ月。未だにiPhone5か …