저는 Google Maps JavaScript API V3를 사용하고 있으며 공식 예제 에는 항상 다음 메타 태그가 포함되어 있습니다.
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />내가 본 대부분의 타사 예제도 마찬가지입니다. 나는 그것을 사용하여 플러그인을 작성했는데 내 사용자 중 한 명이 자신의 모바일 장치에서 확대 및 축소 할 수 없다고 말했습니다 . 테스트 할 모바일 장치가없고 검색 결과 유용한 정보가 표시되지 않았습니다.
그래서, 태그의 요점은 무엇입니까? 놔둬 야하나요? 브라우저 에이전트를 감지하고 데스크톱 브라우저에만 표시해야합니까?
당신이 플러그인을 검사 할 경우, 당신은 할 수 있습니다 다운로드 , 소스를 검색 하거나 라이브 예제를 참조하십시오 .
답변:
많은 장치 (예 : iPhone)에서 사용자가 브라우저의 확대 / 축소를 사용하지 못하게합니다. 지도가 있고 브라우저가 확대 / 축소를 수행하면 사용자는 거대한 픽셀 화 된 레이블이있는 큰 픽셀 화 된 이미지를 볼 수 있습니다. 아이디어는 사용자가 Google지도에서 제공하는 확대 / 축소를 사용해야한다는 것입니다. 플러그인과의 상호 작용에 대해 확실하지 않지만 그것이 바로 그 이유입니다.
더 최근에는 @ehfeng이 답변에서 언급했듯이 Android 용 Chrome (및 기타)은 뷰포트 태그가 설정된 페이지에서 기본 브라우저 확대 / 축소가 없다는 사실을 활용했습니다. 이를 통해 브라우저가 대기하는 데 걸리는 터치 이벤트에 대한 끔찍한 300ms 지연을 제거하고 단일 터치가 더블 터치로 끝나는 지 확인할 수 있습니다. ( "싱글 클릭"과 "더블 클릭"을 생각해보십시오.) 그러나이 질문이 처음에 제기되었을 때 (2011 년), 이것은 어떤 모바일 브라우저에서도 사실이 아닙니다. 최근에 우연히 생겨난 굉장함이 추가되었습니다.
사용자 확장 가능 (즉, 두 번 탭하여 확대 / 축소하는 기능)을 비활성화하면 브라우저에서 클릭 지연을 줄일 수 있습니다. 터치 지원 브라우저에서 사용자가 두 번 탭하여 확대 / 축소 할 것으로 예상하면 브라우저는 일반적으로 클릭 이벤트를 발생시키기 전에 300ms를 기다렸다가 사용자가 두 번 탭할지 확인합니다. 사용자 확장 가능을 비활성화하면 Chrome 브라우저가 클릭 이벤트를 즉시 실행하여 더 나은 사용자 경험을 제공 할 수 있습니다.
Google IO 2013 세션 https://www.youtube.com/watch?feature=player_embedded&v=DujfpXOKUp8#t=1435s에서
업데이트 : 더 이상 사실이 아니며 <meta name="viewport" content="width=device-width">300ms 지연을 제거하기에 충분합니다.
디자인이 반응하지 않는 경우 뷰포트 메타 태그 를 사용하지 않아야합니다 . 이 태그를 잘못 사용하면 레이아웃이 깨질 수 있습니다. 수행중인 작업을 알지 못하는 경우이 태그를 사용하면 안되는 이유에 대한 문서를 보려면이 문서를 읽을 수 있습니다. http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho
"user-scalable = no"는 또한 iOS 입력 상자에서 확대 효과를 방지하는 데 도움이됩니다.