[meta] Handheldfriendly ..viewport..

카테고리가 이곳이 맞는지는 모르겠지만..

 

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=mainata&logNo=220356415496 

viewport : 모바일웹 제작시 화면의 표시 영역 설정 및 지원되지 않을때

https://stackoverflow.com/questions/1988499/meta-tags-for-mobile-should-they-be-used

Meta-tags for mobile – should they be used?

https://atin.tistory.com/363

Mobile용 Meta Tag

<haed>
	<meta name="viewport" content="user-scalable=no,initial-scale=1.0, maximum-scale=1.0, 
				minimun-scale=1.0, width=device-width">
</head>

content 속성에 지정할 수 있는 값 (값이 여러개인 경우 콤마로 구분)

1) minimum-scale : 축소 배율 값

범위 : 0~10 / 기본값 : 0.25

2) maxmum-scale : 확대 배율 값

범위 : 0~10 / 기본값 : 1.0

3) user-scalable : 사용자에 의한 확대/축소 설정 사용 유무

범위 : yes(사용한다) 또는 no(사용안한다) / 기본값 : yes 

 

모바일에서 viewport가 지원되지 않을 때

모바일 브라우저에서 viewport가 지원되지 않을 때 meta tag를 사용하면 된다.

<meta name="HandheldFriendly" content="true">
<meta name="MoblieOptimized" content="320">

그래서 모바일까지 완벽하게 적용하기 위해서는 viewport와 meta tag를 같이 쓰는게 좋다고 한다.

---

viewport

viewport는 널리 사실상의 표준 지원 오페라 모바일, 아이폰, 안드로이드, 아이리스, IE, 블랙 베리, Obigo, 파이어 폭스 : 원래 아이폰에 모바일 사파리 애플에 의해 만들어진, 그것은 거의 모든 다른 모바일 브라우저에 의해 채택 된 것 -

간단한 사용 사례: 모바일에서 사이트를 전체 너비로 만들기:

<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 

다른 두 가지는 '피처 폰'에 대한 더 오래된 사실상의 '표준'입니다. 일반적으로 지원하기에는 너무 오래되었습니다 viewport.

HandheldFriendly

이 태그는 원래 AvantGo 브라우저에서 모바일 콘텐츠를 식별하는 데 사용되었지만 모바일 웹사이트 식별을 위한 일반 표준이 되었습니다. 그러나 이 메타 태그를 지원하는 브라우저 범위는 알 수 없습니다.

- Palm의 AvantGo mobil browser를 위한 태그

모바일화면 크기 조정 관련 설정

true : 모바일용(화면 크기 조정가능) / false : Desktop에 최적화된 html사용

<meta name="HandheldFriendly" content="true"/> 

MobileOptimized (모바일 최적화)

이것은 결국 모바일 콘텐츠를 식별하는 또 다른 수단으로 사용되는 Windows 독점 메타 태그입니다. 이 태그의 단점은 특정 너비를 지정해야 한다는 것입니다. 다시 말하지만, 이 태그에 대한 지원이 무엇인지 알 수 없습니다.

- Microsoft에서 모바일을 위해 Layout의 가로크기를 조정하기 위해 고안한 태크

<meta name="MobileOptimized" content="320"/> 

요약

지원 viewport하지 않는 구형 피처 폰을 지원 해야 하는 경우가 아니면 사용하십시오. 이 경우 HandheldFriendly 및 MobileOptimized를 모두 사용하지만 대상 장치를 테스트하고 알아내십시오 .

그들은 사용해야합니까? 언제 어디서 사용하는 것이 적절한가요? 대안이 있습니까(사용자 에이전트 인식 없음)?

그것들은 그들이 만드는 효과를 원할 때 사용해야 합니다. 일반적으로 전화기에 사용할 기본 확대/축소, 크기 조정 제어 등입니다. 이것은 뷰포트를 사용하려는 이유에 대한 좋은 설명입니다. 예: http:// davidbcalhoun.com/2010/viewport-metatag - 뷰포트로 설정할 수 있는 다른 속성과 그 기능도 나열합니다.

이러한 메타태그를 사용하지 않고 이러한 효과를 얻을 수 있는 다른 방법은 펑키한 JS 트릭을 사용하는 것입니다. 속도가 느리고 스크립트 로드가 필요하며 유지 관리가 어렵고 신뢰할 수 없습니다. 지원하지 않는 브라우저 viewport에는 뷰포트 관련 항목에 대한 버그가 많은 JS 인터페이스가 있을 수 있습니다. 아래의 quirksmode 링크를 참조하십시오.

참고문헌

• A에 대한 정말 이 모든 주제의 포괄적 인 설명을 참조 http://www.quirksmode.org/mobile/viewports.html & http://www.quirksmode.org/mobile/viewports2.html
• https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
• http://davidbcalhoun.com/tag/mobileoptimized
• http://www.quirksmode.org/mobile/ & http://www.quirksmode.org/mobile/tableViewport.html
• http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/