モバイル端末再構築シリーズ2-新規空白ページ
10466 ワード
html 5ドキュメントの説明
metaタグ
viewport
ビューウィンドウ、エンド固有のラベルを移動します.一般的には、
上のコードは、幅をデバイスの幅に設定することを順次示しており、デフォルトではスケールされず、ユーザーのスケールは許可されていません(つまりスケール禁止)、Webページのロード時にアドレスバーとナビゲーションバーを非表示にします(ios 7.1新規).
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>metaタグ
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />viewport
ビューウィンドウ、エンド固有のラベルを移動します.一般的には、
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />上のコードは、幅をデバイスの幅に設定することを順次示しており、デフォルトではスケールされず、ユーザーのスケールは許可されていません(つまりスケール禁止)、Webページのロード時にアドレスバーとナビゲーションバーを非表示にします(ios 7.1新規).
width – // [pixel_value | device-width] viewport ， 200 10,000， 980
height – // [pixel_value | device-height ] viewport ， 223 10,000
initial-scale – // float_value， （ > 0 10）
minimum-scale – // float_value，
maximum-scale – // float_value，
user-scalable – // [yes | no]
target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
：target-densitydpi ， demo， 。 。
apple-mobile-web-app-capable
webapp ， 。
<meta name="apple-mobile-web-app-capable" content="yes" />
apple-mobile-web-app-status-bar-style
Webapp を すると、 の 、 、バッテリーの ナビゲーションバーの が されます.デフォルトはdefault( )で、black( )とblack-translucent(グレー )に できます.これは に のページデザインの を み わせて します.<meta name="apple-mobile-web-app-status-bar-style" content="black" />
:apple-mobile-web-app-capableとapple-mobile-web-app-status-bar-styleについてよく していない は、 の の3 の を してください.スクリーンショットの があります.
telephone & email
ページの は、 <meta name="format-detection" content="telephone=no" />
じようにemail <meta name="format-detection" content="email=no" />
もちろん は に くことができます<meta name="format-detection" content="telphone=no, email=no" />
その meta <!-- 360 (webkit) -->
<meta name="renderer" content="webkit">
<!-- IE -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- ， viewport ， -->
<meta name="HandheldFriendly" content="true">
<!-- -->
<meta name="MobileOptimized" content="320">
<!-- uc -->
<meta name="screen-orientation" content="portrait">
<!-- QQ -->
<meta name="x5-orientation" content="portrait">
<!-- UC -->
<meta name="full-screen" content="yes">
<!-- QQ -->
<meta name="x5-fullscreen" content="true">
<!-- UC -->
<meta name="browsermode" content="application">
<!-- QQ -->
<meta name="x5-page-mode" content="app">
<!-- windows phone -->
<meta name="msapplication-tap-highlight" content="no">
:
Supported Meta Tags section of the Safari HTML Reference
フロントエンドを かして くこと---フロントエンド のmetaタグ
モバイルプラットフォームのmetaタグ--- な
WebAppのMetaタグ
linkラベル
apple-touch-icon apple-mobile-web-app-capableがyesに されている 、iPhone、iPad、iTouchのsafariでは、メイン に ボタンを してWebサイトをメイン に できます. するapple-touch-iconラベルを すると、メイン に されたアイコンは たちが した を します.
に、oxの なるデバイスに して、 iconを する.デフォルトのiphoneのサイズは60 px、ipadは76 px、retinaスクリーンに2 を じます.
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
ios7 （ ）， ， apple-touch-icon-precomposed.png apple-touch-icon.pngアイコンの は のとおりです.
の と するアイコンがなければ、 よりも きいが、 に も いアイコンを に する. サイズより きいアイコンがない は、 サイズに も いアイコンを に します. のアイコンが サイズに する 、キーワードprecomposedを むアイコンが に されます.
ゾーン でlinkラベルでアイコンを しない 、サイトのルートディレクトリの にapple-touch-iconを とするpngアイコンが に されます.
:ios 7はiconに を しません.ios 7は、iconにキーワード-precomposed.pngが でない り、デフォルトでiconに を します.
:
Specifying a Webpage Icon for Web Clip
WebAppのapple-touch-icon
http://taylor.fausak.me/2013/11/01/ios-7-web-apps/
apple-touch-startup-image
にapple-mobile-web-app-capableがyesに されているため、WebAppでNativeAppのような を することができる.<link rel="apple-touch-startup-image" href="/startup.png">
apple-touch-iconと なり、apple-mobile-web-app-capableはsizes をサポートしていないため、mediaを してretinaと スクリーンの なる のロードを します.
// iPhone
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" />
// iPhone Retina
<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
// iPhone 5
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png">
// iPad portrait
<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image" />
// iPad landscape
<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image" />
// iPad Retina portrait
<link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
// iPad Retina landscape
<link href="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image" />
：
Launch Images
iOS Web App Icons & Startup Images
iPhone 5 Web App Startup Image
， apple-touch-icon apple-touch-startup-image
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />
<title>Document</title>
</head>
<body>
</body>
</html>
:http://www.w3cplus.com/mobile/mobile-terminal-refactoring-create-page.html