IT_Programming/Objective-C · Swift · iOS

UIWebview를 이용하여 하이브리드 형태의 앱 개발시 주의할 점

JJun ™ 2014. 11. 10. 19:37



  출처: https://hansne.wordpress.com/2014/11/04/uiwebview를-이용하여-하이브리드-형태의-앱-개발시-주의할/




UIWebview를 이용하여 하이브리드 형태의 앱을 개발할 때 주의점들을 기록하고 업데이트하기 위해 글을 남김니다.

1. UIWebview에서는 popup를 지원하지 않는다.

로그인에서 비밀번호 찾기를 할 경우, SNS로그인을 하는 경우 일반 웹페이지에서 Popup형태로 구현되어 있는 경우가 많다.
|이럴 경우 팝업 윈도우만 UIWebview에 표현되고 Popup이 닫히지 않아서 흰 화면만 놓이는 현상이 발생한다.

따라서 기 구현된 모바일 페이지를 iOS앱에서 사용할 경우에는 popup으로 되어 있는 부분을 없애고
현재 페이지에 redirection되는 방식으로 변경해 주어야 한다.

2. iPhone 6, iPhone 6+ 에서 UIWebView의 콘텐츠가 해상도 비율이 다르게 표시될 수 있다.

모바일 웹에서 디바이스의 width에 따라 화면의 레이아웃을 구성하기 위해서  viewport의 content값을 “width=device-wdith“로 지정하여 사용한다.

위와 같이 사용하게 되면 iPhone 5까지는 width가 320으로 얻어지며, iPhone 6은 375,  iPhone 6+는 414가 되어
이에 맞게 화면 레이아웃을 구성하게 된다.

그런데 iPhone 6와 iPhone 6+에서도 375, 414가 아닌 320이 얻어짐에 따라 모바일 웹내의 콘텐츠 및 이미지들의
비율이 깨지는 현상이 발생하는 경우가 있다.

이런 경우 앱의 AppDelegate.m 파일에서 [[UIScreen mainsScreen] boudns] 값을 NSLog로 확인해 보면
iPhone 6와 iPhone 6+에서도 width가 320으로 얻어오는 것을 확인할 수 있다.

즉, 디바이스 자체가 width를 320으로 인식하고 있기 때문에 웹 브라우저내 html코드에서도 width가 320으로 얻어지는 것이다.

이를 해결하기 위해서는  lauchscreen.xib 파일을 추가해 주면 됩니다.

iOS에서 앱이 실행될 때 lauchscreen.xib가 존재하는 지 확인하고 이 파일이 존재하면 이 앱이 iphone 6와 iphone 6+를 지원하는 앱이라고 판단하여
device의 크기를 올바르게 얻게 된다.

다음은 Apple Developer사이트에 있는 이에 대한 설명이다.

To let the system know that your app supports the iPhone 6 screen sizes, include a storyboard launch screen file in your app’s bundle. At runtime, the system looks for a storyboard launch screen file. If such an file is present, the system assumes that your app supports the iPhone 6 and 6 Plus explicitly and runs it in fullscreen mode. If such an image is not present, the system reports a smaller screen size (either 320 by 480 points or 320 by 568 points) so that your app’s screen-based calculations continue to be correct. The contents are then scaled to fit the larger screen.