모바일 단말기를 위한 완전한 메타 태그 설정 세트

앞선 프론트엔드 연구에서 메타태그에 대한 이해는 이 문장뿐이었습니다.

 <메타 문자 집합=UTF-8>

그러나 웹사이트를 열면 헤드 태그에 메타 태그 열이 있습니다. 예를 들어 VeVb 무술 웹사이트가 있는데 제가 잘 알지 못해서 학습 계획서 앞에 메타 태그를 추가했습니다.

 <메타 이름=뷰포트 콘텐츠=폭=장치 폭, 초기 규모=1.0, 최대 규모=1.0, 최소 규모=1.0, 사용자 확장 가능=아니요>

이는 가장 일반적으로 사용되는 명령으로, 뷰포트의 논리적 너비와 높이를 각각 지정합니다. 해당 값은 픽셀 단위의 숫자이거나 특수 마커 기호입니다. 너비 지시문은 장치 너비 태그를 사용하여 뷰포트 너비가 장치의 화면 너비여야 함을 나타냅니다. 마찬가지로 높이 지시문은 장치 높이 플래그를 사용하여 뷰포트 높이가 장치의 화면 높이임을 나타냅니다.

user-scalable 지시문은 사용자가 뷰포트, 즉 웹 페이지 보기를 확대/축소할 수 있는지 여부를 지정합니다. yes 값은 사용자가 확대/축소할 수 있도록 허용하고, no 값은 확대/축소를 허용하지 않습니다.

초기 크기 지시어는 웹 페이지의 초기 크기를 설정하는 데 사용됩니다. 기본 초기 스케일링 값은 스마트폰 브라우저마다 다릅니다. 일반적으로 장치는 브라우저에서 전체 웹 페이지를 렌더링하며, 1.0으로 설정하면 크기가 조정되지 않은 웹 문서가 표시됩니다.

maximum-scale 및 maximum-scale 지시문은 웹 페이지의 확대/축소 비율에 대한 사용자 제한을 설정하는 데 사용됩니다. 값의 범위는 0.25에서 10.0입니다. 초기 크기 조정과 마찬가지로 이러한 지시어의 값은 뷰포트의 콘텐츠에 적용되는 크기 조정입니다.

모든 스마트폰 브라우저는 ViewPort <meta> 태그의 width 및 user-scalabel 지시문을 지원합니다. 그러나 Opera Mobile은 사용자 확장 가능 지시문을 사용하지 않고 대신 사용자가 모바일 브라우저에서 웹 페이지를 확대/축소할 수 있는 기능을 항상 유지해야 한다고 주장합니다.

window.devicePixelRatio는 기기의 물리적 픽셀과 기기 독립적 픽셀(딥)의 비율입니다. 공식 표현은 다음과 같습니다: window.devicePixelRatio = 물리적 픽셀/딥

콘텐츠 값이 화면 너비보다 작거나 같은 경우 웹 사이트 적응형 화면 맞춤이 꺼집니다. 웹 사이트는 브라우저 확장에 따라 확장되지 않습니다.

콘텐츠 값이 화면 너비보다 크면 화면 맞춤이 활성화됩니다.

2015-07-08

 <메타 이름=뷰포트 콘텐츠=최소 UI>

iOS 7.1의 Safari에서는 최소한의 UI 속성이 메타 태그에 추가되어 웹 페이지가 로드될 때 상단 주소 표시줄과 하단 탐색 표시줄을 숨길 수 있습니다.

 <메타 이름=apple-mobile-web-app-capable content=yes>

webapp 기능 활성화 여부가 yes로 설정되어 있습니다. 웹 사이트는 전체 화면 모드에서 기본 Apple 도구 모음 및 메뉴 표시줄을 삭제합니다.

 <메타 이름=apple-touch-fullscreen content=yes>

웹 앱 프로그램 지원 활성화

 <메타 이름=형식 감지 콘텐츠=전화=아니요><메타 이름=형식 감지 콘텐츠=이메일=아니요 />

iPhone은 자동으로 텍스트에 링크 스타일을 추가하고 번호를 클릭하면 자동으로 전화를 걸 수 있습니다!

Telephone=no는 페이지의 번호를 무시하고 전화번호로 식별합니다.

Telephone=yes는 숫자를 전화 접속 링크로 변환합니다. 기본적으로 켜져 있습니다!

 <meta name=apple-mobile-web-app-status-bar-style content=default /><meta name=apple-mobile-web-app-status-bar-style content=black /><meta name=apple- mobile-web-app-status-bar-style 콘텐츠=검은색 반투명 ​​/>

상태 표시줄 표시 스타일 제어 기본(흰색) 검은색(검은색) 검은색 반투명(회색 반투명)

apple-mobile-web-app-capable이 yes로 설정된 경우 홈 화면에 추가 버튼을 사용하여 iPhone, iPad 및 iTouch Safari의 홈 화면에 웹 사이트를 추가할 수 있습니다.

해당 apple-touch-icon 태그를 설정하면 홈 화면에 추가되는 아이콘이 우리가 지정한 그림을 사용하게 됩니다.

다음은 다양한 ox 장치에 가장 적합한 아이콘을 선택하는 것입니다. iPhone의 기본 크기는 60px, iPad는 76px이며 Retina 화면은 2배로 늘어납니다.

 <link rel=apple-touch-icon href=touch-icon-iphone.png><link rel=apple-touch-icon size=76×76″ href=touch-icon-ipad.png><link rel=apple- 터치 아이콘 크기=120×120″ href=touch-icon-iphone-retina.png><link rel=apple-touch-icon 크기=152×152″ href=touch-icon-ipad-retina.png>

iOS7 이전에는 시스템이 기본적으로 아이콘에 특수 효과(둥근 모서리 및 하이라이트)를 추가했습니다. 시스템에서 특수 효과를 추가하지 않으려면 apple-touch- 대신 apple-touch-icon-precomposed.png를 사용할 수 있습니다. icon.png.

해당 디바이스의 권장 크기에 맞는 아이콘이 없는 경우, 권장 크기보다 크지만 권장 크기에 가장 가까운 아이콘이 먼저 사용됩니다.

권장 크기보다 큰 아이콘이 없을 경우 권장 크기에 가장 가까운 아이콘이 먼저 선택됩니다.

권장 크기에 맞는 아이콘이 여러 개인 경우 미리 구성된 키워드가 포함된 아이콘이 먼저 선택됩니다.

해당 영역에 링크 태그를 사용하여 아이콘을 지정하지 않으면 웹 사이트의 루트 디렉터리에서 apple-touch-icon 접두어가 붙은 png 아이콘을 자동으로 검색합니다.

<meta http-equiv=X-UA-Compatible content=IE=edge> IE가 호환 모드를 사용하지 못하도록 방지

<meta name=MobileOptimized content=320″> Microsoft가 IE Mobile 버전에 대해 설정한 정의 너비 태그

브라우저는 파일 크기를 자동으로 조정하지 않습니다. 즉, 파일 크기는 고정되어 있으며 브라우저에 따라 늘어나거나 크기가 조정되지 않습니다.

<meta name=HandheldFriendly content=true /> : 휴대용 기기에 적합한지 여부, true 또는 false만 가능

<meta name=screen-orientation content=portrait> 세로 화면 강제 적용

<meta name=full-screen content=yes> 강제 전체 화면

<meta name=browsermode content=application> 애플리케이션 모드

<meta name=x5-orientation content=portrait> 세로 화면 강제 적용

<meta name=x5-fullscreen content=true> 강제 전체 화면

<meta name=x5-page-mode content=app> 애플리케이션 모드

<meta name=renderer content=webkit> 빠른 모드 활성화

메타는 검색 엔진에 대한 설명, 키워드, 업데이트 빈도 등 페이지에 대한 메타 정보를 제공하는 요소를 의미합니다. 태그는 문서의 헤드에 있으며 내용이 없습니다. 태그의 속성은 문서와 연결된 이름/값 쌍을 정의합니다.

 <meta content=width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0 name=viewport> <meta content=yes name=apple-mobile-web-app-capable> <meta 콘텐츠=블랙 이름=apple-mobile-web-app-status-bar-style> <meta 콘텐츠=전화=이름 없음=형식-감지>

첫 번째 메타 태그는 다음을 의미합니다. 문서 너비와 장치 너비를 1:1로 유지하고 문서의 최대 너비 비율은 1.0이며 사용자가 보기를 확대하기 위해 화면을 클릭할 수 없습니다.

• width - 뷰포트의 너비 height - 뷰포트의 높이
• 초기 스케일 - 초기 스케일링 비율
• 최소 규모 - 사용자가 확대/축소할 수 있는 최소 규모
• maximum-scale - 사용자가 확대/축소할 수 있는 최대 배율
• user-scalable - 사용자가 수동으로 크기를 조정할 수 있는지 여부

두 번째 메타 태그는 iPhone 장치의 Safari 개인 메타 태그입니다. 즉, 전체 화면 모드 탐색을 허용합니다.

세 번째 메타 태그는 iPhone의 Safari 상단에 있는 상태 표시줄의 스타일을 지정하는 iPhone의 비공개 태그이기도 합니다.

웹 앱 애플리케이션의 상태 표시줄(화면 상단 표시줄) 색상입니다.

기본값은 기본값(흰색)이며, 검정(검은색), 검정-반투명(회색 반투명)으로 설정할 수 있습니다.

네 번째 메타 태그는 다음을 의미합니다. 페이지에 있는 숫자를 전화번호로 무시하도록 장치에 지시합니다.

 <meta name=aplus-terminal content=1/><meta name=apple-mobile-web-app-title content=TMALL/><meta name=apple-mobile-web-app-capable content=yes/><meta 이름=apple-mobile-web-app-status-bar-style 콘텐츠=검은색 반투명/><메타 이름=뷰포트 content=width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no/><메타 이름=형식 감지 content=telephone=no, address=no>

 <meta charset=utf-8><meta content=yes name=apple-mobile-web-app-capable/> <meta content=yes name=apple-touch-fullscreen/> <meta content=telephone=no,email= no name=format-Detection/> <meta name=App-Config content=fullscreen=yes,useHistoryState=yes,transition=yes/><meta name=viewport 콘텐츠=초기 규모=0.5, 최대 규모=0.5, 최소 규모=0.5, 사용자 확장 가능=아니오>

 <title>Jingdong-Mobile 버전</title><meta name=viewport content=width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0;><meta http-equiv=Content -Type content=text/html; charset=GBK><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><meta http-equiv=Expires content=-1><meta http-equiv= Cache-Control 콘텐츠=no-cache><meta http-equiv=Pragma 콘텐츠=no-cache><meta 이름=키워드 콘텐츠=><meta 이름=설명 콘텐츠=>

 <title>NetEase Mobile</title><meta name=viewport content=width=device-width,initial-scale=1, maximum-scale=1, 최소-scale=1, user-scalable=no><meta content = Telephone=no 이름=형식-감지 /><메타 이름=키워드 내용= /><메타 이름=설명 내용= />

 <meta name=referrer content=always><meta charset=utf-8><meta name=viewport content=width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no><meta 이름=형식-감지 내용=전화=아니오>

 <title>모바일 Sohu.com</title> <meta http-equiv=Content-Type content=text/html /><meta http-equiv=Cache-Control content=no-cache />< 메타 이름=뷰포트 콘텐츠=폭=장치 폭, user-scalable=no, 초기 규모=1.0, 최대 규모=1.0, 최소 규모=1.0 /><meta name=MobileOptimized content=320/><meta name=description content= /><meta name=keywords content= />

----

 <메타 이름=뷰포트 콘텐츠=width=device-width,user-scalable=no, 초기 규모=1.0, 최대 규모=1.0, 최소 규모=1.0″>

뷰포트 -> 창(표시 영역)

너비=장치 너비 장치 너비

 <metaname = 'viewport'content = width=320><metaname = 'viewport'content = width=device-width>

user-scalable=no/0 확장 허용 여부

초기 규모=1.0 초기값

최대 규모=1.0

최소 규모=1.0

-------------

 <meta name=viewport content=width=device-width, user-scalable=no>

user-scalable=no/0은 사용자가 페이지 크기를 조정하는 것을 비활성화합니다.

 <meta name=viewport content=width=device-width, user-scalable=no,initial-scale=1.0″>

initial-scale=1.0 페이지 확대/축소 비율 초기화

 <메타 이름=뷰포트 콘텐츠=폭=장치 폭, 초기 규모=1.0, 최대 규모=1.0, 사용자 확장 가능=0″>

maximum-scale=1.0 최대 스케일링 비율(개별 휴대폰 Huawei Meta8의 경우)

-------------

 <!—웹 페이지를 앱으로 실행하도록 허용(홈 화면에 추가 허용)—><meta name=apple-mobile-web-app-capable content=yes><!—상태 표시줄 색상—><meta name=apple- 모바일 -web-app-status-bar-style 콘텐츠=검은색>

 <meta name=viewport content=width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0″><meta name=apple-mobile-web-app-capable content=yes>< 메타 이름=apple-mobile-web-app-status-bar-style content=black><!—금지된 전화번호 및 이메일 주소—><meta name=format-Detection 내용=전화=아니요,이메일=아니요>

 <meta content=yes name=apple-mobile-web-app-capable><!–전체 화면으로 표시하려면 페이지 영역을 클릭하세요.—><meta content=yes name=apple-touch-fullscreen/><meta content=telephone =no,email =no name=format-Detection/><!–응용 프로그램 정보, 시스템 기록 유지, 모션 효과–><meta name=App-Config content=fullscreen=yes,useHistoryState=yes,transition=yes/>

 <!–360 브라우저가 크롬 커널을 사용하여 페이지를 렌더링하도록 강제–><meta name=renderer content=webkit><!–IE의 최신 모드를 사용하여 렌더링해 보세요–><meta http-equiv=X-UA -호환 콘텐츠=IE= edge><!–핸드헬드 장치에 최적화, 주로 BlackBerry와 같이 뷰포트를 인식하지 못하는 일부 오래된 브라우저에–><meta name=HandheldFriendly content=true><!–Microsoft의 기존 브라우저–><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- 모드 콘텐츠=앱>

위의 내용은 이 기사의 전체 내용입니다. 이 기사의 내용이 모든 사람의 학습이나 업무에 특정 참고 가치가 있기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨주세요. VeVb Wulin의 지원에 감사드립니다. 회로망.