ホームページ >ウェブフロントエンド >htmlチュートリアル >HTMLモバイル端末-新規空白ページの各メタタグの詳細説明

HTMLモバイル端末-新規空白ページの各メタタグの詳細説明

黄舟オリジナル: 2017-06-29 13:26:033232ブラウズ

<!DOCTYPE html>
<html>
<head>    
<meta charset="UTF-8">    
<title>Document</title></head><body></body></html>

メタタグ

<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" />

ビューポート

ビューウィンドウ、モバイル固有のタグ。一般に、次のコードを使用できます:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />

上記のコードは、幅がデバイスの幅に設定され、デフォルトではスケーリングが行われず、ユーザーはズームが許可されていないことを示します (つまり、スケーリングは禁止されています) )、Web ページが読み込まれるとアドレスバーとナビゲーションバーが非表示になります (ios7 .1 new)。

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 の画面ピクセル密度はスケーリングに関連しています。このデモを変更して、携帯電話での実際の効果を確認してください。通常、このプロパティは設定しません。

apple-mobile-web-app-capable

webapp機能を有効にすると、デフォルトのAppleツールバーとメニューバーが削除されます。

<meta name="apple-mobile-web-app-capable" content="yes" />

apple-mobile-web-app-status-bar-style

Web アプリ機能が開始されると、携帯電話の電波、時間、バッテリーが表示される上部のナビゲーションバーの色。デフォルト値はデフォルト (白) ですが、黒 (黒) および黒半透明 (グレー半透明) に設定できます。これは主に実際のページデザインのメインカラーマッチングに基づいて設定されます。

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

注: apple-mobile-web-app-capable と apple-mobile-web-app-status-bar-style がよくわからない場合は、以下の 3 番目の参考記事にスクリーンショットの手順が記載されていますので、確認してください。 apple-mobile-web-app-capable和apple-mobile-web-app-status-bar-style不太理解，可查阅下面的参考资料第三篇文章，里面有截图说明。

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上可以使用添加到主屏按钮将网站添加到主屏幕上。而通过设置相应apple-touch-icon标签，则添加到主屏上的图标就会使用我们指定的图片。

以下是针对ox不同设备，选择一个最优icon。默认iphone的大小为60px，ipad为76px，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图标。

注：ios7不再为icon添加特效，ios7以前则默认为icon添加特效，除非icon有关键字-precomposed.png为后缀。

参考资料：

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

電話とメール

電話番号として認識されるページ内の数字は無視してください

// 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" />

メール認識もあります🎜

    
    
<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" />    
    
Document

🎜もちろん両方を一緒に書くこともできます🎜rrreee🎜その他のメタ🎜rrreee🎜参考文献:🎜

🎜 Safari HTML リファレンスのサポートされているメタタグセクション🎜
🎜 モバイルフロントエンドの作業に関する事項 -- フロントエンドのプロダクションメタタグ🎜 li>
🎜 モバイルプラットフォームのメタタグ🎜
🎜 WebAppのメタタグ🎜

🎜リンクタグ🎜🎜apple -touch- アイコン🎜🎜 apple-mobile-web-app-capable が yes に設定されている場合は、[ホーム画面に追加] ボタンを使用して Web サイトを追加できます。 iPhone、iPad、iTouch の Safari ホーム画面に追加します。対応する apple-touch-icon タグを設定すると、ホーム画面に追加されるアイコンは画像。 🎜🎜以下は、さまざまな ox デバイスに最適なアイコンの選択です。 iPhone のデフォルトサイズは 60 ピクセル、iPad は 76 ピクセル、Retina スクリーンは 2 倍になります。 🎜rrreee🎜 ios7 より前では、システムはデフォルトでアイコンに特殊効果 (丸い角とハイライト) を追加します。システムに特殊効果を追加したくない場合は、apple-touch-icon-precomposed.png を使用できます。 <code>apple -touch-icon.png の代わりに 🎜🎜アイコンで使用される優先度は次のとおりです。 🎜

🎜 対応するデバイスの推奨サイズと一致するアイコンがない場合、そのアイコンは、推奨サイズより大きいですが、推奨サイズに最も近いものが最初に使用されます。 🎜
🎜 推奨サイズより大きいアイコンがない場合は、推奨サイズに近いアイコンが優先されます。 🎜
🎜 推奨サイズを満たすアイコンが複数ある場合は、プリコンポーズされたキーワードを含むアイコンが最初に選択されます。 🎜

🎜エリア内でリンクタグを使用してアイコンが指定されていない場合は、自動的に apple-touch-icon というプレフィックスが付いた png アイコンを "_blank"> 検索します。 🎜🎜注: ios7 では、アイコンに特殊効果が追加されなくなりました。ios7 より前では、アイコンの接尾辞としてキーワード -precomposed.png が付いている場合を除き、特殊効果がデフォルトでアイコンに追加されました。 🎜🎜参考資料: 🎜

🎜 Web クリップの Web ページアイコンの指定🎜
🎜 WebApp の apple-touch-icon 🎜

🎜apple-touch-startup-image🎜🎜もベースapple-mobile-web-app-capable が yes に設定されている場合、WebApp を使用して NativeApp と同様の起動画面を設定できます。 🎜rrreee🎜 apple-touch-icon とは異なり、apple-mobile-web-app-capable は size 属性をサポートしていないため、メディアを使用して Retina の読み込みを制御することは、水平および垂直のスプラッシュ画面の読み込み。 🎜rrreee🎜概要🎜🎜空白のページテンプレートを作成し、特定の状況に基づいて apple-touch-icon と apple-touch-startup-image を追加します🎜rrreee

以上がHTMLモバイル端末-新規空白ページの各メタタグの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTMLモバイルWebサイトに追加する必要があるメタタグ次の記事：HTMLモバイルWebサイトに追加する必要があるメタタグ

続きを見る