안드로이드 셋탑에서 카카오맵 PC 버전을 보여 주고자 합니다.
PC 버전의 URL 을 보여주면 모바일로 리다이렉트 되는데, 이를 막을 수 있는 방법이 있을까요?
모바일 버전을 보여 줬을경우 아래 이미지 처럼 하단이 짤려서 보이지 않습니다.
iframe 으로 해당 링크 연결을 하고자 하는데 있어서
PC 버전을 강제로 유지 시키거나, 모바일 페이지가 정상 동작 할 수 있도록 도움이 필요합니다.
하단에 copyright와 축척이 보이는 걸로 보아 지도 영역 스타일이 깨진 것 같네요.
개발자 도구 > Elements탭에서 id가 maps인 element의 height를 조정하면 첨부 코드랑 비슷하게 표시되고 있습니다.
혹시 사용하는 스타일 파일이 있다면 개발자 도구를 열어서지도 스타일에 영향을 준 스타일 속성이 있는지 확인 부탁드립니다.
다른 CSS 영향 받는 부분은 없어 보입니다.
카카오맵에서 높이값을 잘못 잡는것 같은데 해당 문제를 위해 웹뷰를 수정을 해야 하는 부분이 있을까요?
제가 확인할 땐 기기에 맞게 높이가 적용되고 있어서 동작을 확인할 수 있는 코드 또는 외부 URL이 있다면 첨부 부탁드립니다.
선언된 스타일이 픽셀로 고정돼서 생긴 이슈인 것 같습니다.
아래 코드는 참고만 해주시고 모바일에 대응되는 크기를 계산할 수 있게 스타일을 적용해 주세요.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, height=device-height">
<title>iframe</title>
<style>
html, body {
padding: 0;
margin: 0;
}
body {
display: block;
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<iframe style="width:100%; height:100%" src="https://m.map.kakao.com/actions/carRoute?sxEnc=MNNRMNHVYYVWTUTQMN&syEnc=QNLNSUVIYYVWTUTWV&startLoc=%EC%84%9C%EC%9A%B8%20%EC%84%B1%EB%8F%99%EA%B5%AC%20%EC%84%B1%EC%88%98%EB%8F%991%EA%B0%80%20656-1094&exEnc=MNWQSQHOPPONMLMOSN&eyEnc=QOQUOMVIYYVWTUTWQO&endLoc=%EA%B2%BD%EA%B8%B0%20%EC%84%B1%EB%82%A8%EC%8B%9C%20%EB%B6%84%EB%8B%B9%EA%B5%AC%20%EB%B0%B1%ED%98%84%EB%8F%99%20511-28"></iframe>
</body>
</html>