html移動先-metaラベルとlinkラベル

6420 ワード

一、metaラベル
metaタグは主にHTML構造層を補助する.metaタグはインターネットのフロントエンドでもモバイルエンドでも重要な役割を果たしています.




HTML 5が言語標準の説明文書です.
最初のmetaラベルのセットは、比較的一般的です.これは、htmlドキュメントの内容であり、ウェブページ符号化はutf-8符号化を採用していることを意味します.utf-8符号化は主に簡体字中国語と英語を対象としている.正確な符号化定義が必要である.Webページの文字が文字化けしてしまいます.第2のmetaラベルのセットは移動端の特属のラベルです.これは、移動側デバイスのデフォルトの幅に等しいビューウィンドウであることを意味します.inital-scaleは初期のスケールを表す.一般的に1.0倍に設定します.maximum-scale=1.0は、ユーザがスケーリングできる最大の割合を表す.user-scalable=no meta IOS 。 meta apple-mobile-web-app-capable  webapp , , 。 webapp , web 。 , webapp , link , link , 。

meta webapp , 、 、
default( ), black( ) black-translucent( )。 。
、link meta link ,link CSS ,



















(1)
, , 。 。 , 。 , 。

(2)


。 , , 。 apple-touch-icon 。 apple-touch-icon-precomposed 。 , 。

(3)

link , 。 media 。 , 480px。

 

, media( ) CSS3 :

media_query: [only | not]? [ and ]
* expression: ( [: ]? )

all-  
screen-
handheld-
print-
projection-
tv -


width | min-width | max-width |          
height | min-height | max-height |        
device-width | min-device-width | max-device-width |          
device-height | min-device-height | max-device-height |          


orientation portrait|landscape。       。 , portrait, landscape。

1、 CSS HTML


2、 CSS
@media only screen and (max-width: 768px) { }
@media only screen and (min-width: 480px) { }

@media handheld and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px)

3、Orientation CSS
@media (orientation: portrait) { }
@media (orientation: landscape) { }

4、Orientation CSS

,media javascript , css 。