안녕하세요.
문제가 없었는데, “viewport"content=” 를 추가후에
Mobile 폰을 세워서 볼때에만 지도가 전체 화면에 보이는것이 아니고 주어진 영역의 좌,상으로만 보이는 현상이 발생합니다.
PC의 경우나 폰을 가로로 볼때에는 전체 영역에 잘 표시됩니다.
map.relayout();을 해도 마찬가지입니다.
viweport관련 추가는 다음과 같이 하였습니다.
<meta name="viewport"content="width=device-width, user-scalable=no"어디가 잘못한 경우인지 조언 부탁드립니다.
스샷만으로는 알기 힘들고요.
첨부하신 코드도 정보가 부족합니다.
만약 relayout을 호출해서 정상화되는 상황이려면
스샷의 상황에서 하얀 영역에
이런 백그라운드 이미지가 보여야합니다.
https://devtalk.kakao.com/t/bady/36528?u=doji.doo
이런 스샷 처럼요.
그냥 정말로 추측에 추측이지만
view width가 selectbox부분까지 꽉차있는 것으로 보아
이미 지도 엘리먼트의 width는 100%가 꽉 차있지만
viewport를 넘쳐버린 selectbox를 표시하기 위해 우측이 비어버리는건 아닌가 싶네요.
우선 지도 상단의 컨트롤들의 스타일을 잘 align해 보시길 권장드립니다.
일단 위의 상황이 해결된 이후에
아래처럼 디바이스 orientation에 따른 지도의 중심을 맞추기 코드를 적용시키면 됩니다.
https://devtalk.kakao.com/t/topic/44595/2?u=doji.doo
다른 분의 경우를 보고 모두 체크해보았습니다.
PC에서는 전혀 문제가 없고 모바일 세워서 보기에서만 발생합니다.
그런데 viewport"content="width=device-width 만 빼면 전혀 문제없이 꽉차는 화면이 보입니다.
흠… 말씀드렸듯,
지도의 문제라기 보다,
viewport와 다른 요소와의 충돌 문제일 가능성이 높은데요…
상단의 컨트롤들을 없애고 지도만 있는 상태에서 먼저 테스트 해 보세요.
그렇군요.
지도위에 보이는 Select박스들을 2개씩만 보이는 식으로 줄이니까 전체가 보이네요.
여하튼 원인을 알았으니 고맙습니다.