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

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

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

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

no image

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

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

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

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

iPhoneの画面をMacで録画する方法

iPhoneの画面を録画したい時ってありますよね? 例えばパズドラの画面をYouT­ubeにアップしたりなど! 今までは専用のアプリなどを使わないとできなかったことが、 MacのOS10.10(­Yo …

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

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