iOS 앱 개발 중 UIWebView로 모바일 웹사이트를 불러올 때 화면이 뷰 크기에 맞지 않거나 레이아웃이 어긋나 보이는 경우가 종종 있습니다. 이럴 때 아래 두 가지 방법을 활용하면 문제를 간단히 해결할 수 있습니다.
1. scalesPageToFit 속성 설정하기
가장 기본적인 해결책은 웹뷰의 scalesPageToFit 속성을 활성화하는 것입니다.
mywebview.scalesPageToFit = YES; mywebview.contentMode = UIViewContentModeScaleAspectFit;
scalesPageToFit를 YES로 설정하면 웹 콘텐츠가 뷰의 크기에 맞춰 자동으로 확대·축소되어 표시됩니다. 여기에 contentMode를 UIViewContentModeScaleAspectFit으로 지정하면 원본의 가로세로 비율을 유지한 채 화면에 꽉 차게 렌더링되므로, 이미지나 텍스트가 찌그러지는 현상을 방지할 수 있습니다.
2. JavaScript로 줌(Zoom) 배율 조절하기
위 설정만으로 세밀한 크기 조정이 필요하다면, 로드된 페이지에 JavaScript를 실행해 body 요소의 zoom 스타일을 직접 변경하는 방법도 유용합니다.
NSString *js = [NSString stringWithFormat:@"document.body.style.zoom = 0.8;"]; [webView stringByEvaluatingJavaScriptFromString:js];
stringByEvaluatingJavaScriptFromString: 메서드를 사용하면 현재 로드된 웹페이지에 JavaScript 코드를 주입해 실행할 수 있습니다. 위 예제처럼 zoom 값을 0.8 등으로 지정하면 전체 페이지 배율을 원하는 수준으로 미세하게 조정할 수 있어, 기본 스케일링만으로는 만족스럽지 않은 경우에 효과적입니다.
두 방법을 상황에 맞게 조합하면 UIWebView에서도 모바일 웹사이트를 훨씬 안정적이고 자연스럽게 표시할 수 있습니다.