[iOS] WKWebView Content Size 모바일에 맞추기

 

  

웹뷰에서 특정 웹페이지를 로드할 때, 해당 페이지가 왼쪽처럼 모바일에 친화적이지 않아서 

컨텐츠의 사이즈가 PC버전을 보는 것처럼 로드될 때가 있습니다.

 

자바스크립트 코드의 meta 태그를 아래와 같이 수정해주면 오른쪽처럼 만들어주어 해결할 수 있는데,

 

<meta name="viewport" content="width=device-width">

 

웹페이지의 코드를 직접 수정할 수 없는 상황일 때는

iOS 네이티브 코드상에서 해당 태그를 삽입하는 스크립트를 추가해주면 됩니다.

 

evaluateJavascript 함수를 통해 원하는 시점에 스크립트를 실행하여 해당 태그를 삽입해주거나

 

var scriptContent = "var meta = document.createElement('meta');"
scriptContent += "meta.name='viewport';"
scriptContent += "meta.content='width=device-width';"
scriptContent += "document.getElementsByTagName('head')[0].appendChild(meta);"

webview.evaluateJavaScript(scriptContent) { (result, error) in
    if let error = error {
        print("error: \(error)")
    }
}

 

또는 addUserScript 함수를 통해 웹 페이지의 로딩 시점에 스크립트를 삽입해줄 수도 있습니다.

 

let scriptContent = """
    var meta = document.createElement('meta');
               meta.setAttribute('name', 'viewport');
               meta.setAttribute('content', 'width=device-width');
               document.getElementsByTagName('head')[0].appendChild(meta);
    """
        
let userScript = WKUserScript(source: scriptContent, injectionTime: .atDocumentEnd, forMainFrameOnly: true)
let contentController = WKUserContentController()
contentController.addUserScript(userScript)

let webConfiguration = WKWebViewConfiguration()
webConfiguration.userContentController = contentController

webview = WKWebView(frame: self.view.bounds, configuration: webConfiguration)

 

 

++)

안드로이드에서는 Webview에 자체적으로 함수를 제공하는데 iOS에는 없나 봅니다..🥲 만들어주세요 애플 아멘

// wide viewport를 사용하도록 설정
webview.getSettings().setUseWideViewPort(true);

// 컨텐츠가 웹뷰보다 클 경우 스크린 크기에 맞게 조정
webview.getSettings().setLoadWithOverviewMode(true);

  

---

 

참고

https://stackoverflow.com/questions/26295277/wkwebview-equivalent-for-uiwebviews-scalespagetofit

https://devvkkid.tistory.com/97

https://swiftsenpai.com/development/web-view-javascript-injection/