Translate

2014년 4월 21일 월요일

[CSS][Android] OEM Browser 에서 flexbox(direction: column) 이 동작하지 않을 때..



나머지 빈영역 채우는 기능이 필요해서 CSS를 알아보던중 flexbox 라는 것을 알게되었다.
마치 Android 의 UI 구성을 할 때 wieght 와 같은 속성이랄까..


세로로 구성을 할 시 찾아보니 다음과 같이 하면 된다고 한다.

-webkit-flex-direction: column;
 flex-direction: column;



그래서 다음과 같이 작업을 했다.
<!DOCTYPE html>
<html>
<head lang="en">
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        html, body {
            margin: 0;
            width: 100%;
            height: 100%;
            background-color: #DFDFE0;
            display: -webkit-box;           /* OLD - iOS 6-, Safari 3.1-6 */
            display: -moz-box;              /* OLD - Firefox 19- (doesn't work very well) */
            display: -ms-flexbox;           /* TWEENER - IE 10 */
            display: -webkit-flex;          /* NEW - Chrome */
            display: flex;
            -webkit-flex-direction: column;
            flex-direction: column;
        }
        * {
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -ms-box-sizing: border-box;
            box-sizing: border-box;
        }
        #detailMsgHeaderFake {
            width: 100%;
            height: 50px;
        }
        #detailMsgHeader {
            width: 100%;    height: 50px;
            position: absolute;
            top: 0;         left: 0;
            background-color: #FFFFFF;
            border: 1px solid #747474;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            -webkit-box-shadow:0px 5px 20px silver;
            -moz-box-shadow:0px 5px 20px silver;
            box-shadow:0px 5px 20px silver;
        }
        #detailMsgContent {
            border: 0;
            width: 100%;
            -webkit-box-flex: 1;            /* OLD - iOS 6-, Safari 3.1-6 */
            -moz-box-flex: 1;               /* OLD - Firefox 19- */
            -webkit-flex: 1;                /* Chrome */
            -ms-flex: 1;                    /* IE 10 */
            flex: 1;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }
        #detailMsgIframe {
            border: 0;
            width: 100%;
            height: 100%;
            border-left: 1px solid #747474;
            border-right: 1px solid #747474;
            border-bottom: 1px solid #747474;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }
    </style>
</head>
<body>
<div id="detailMsgHeaderFake"></div>
<div id="detailMsgHeader"></div>
<div id="detailMsgContent">
    <iframe id="detailMsgIframe" src="http://ko.learnlayout.com/"></iframe>
</div>
</body>
</html>



결과는?? 다음과 같이 나왔다.


Phone 환경:
     Phone: LG-F220K (LG-GK)
     OS ver: Android 4.1.2
     Browser: OEM Browser (Chrome Browser 는 문제없음)







원래 의도했던 건 아래의 모습...





다음과 같이 CSS를 한줄 추가했다.
이전 버전의 방법이라고 한다. Link
<!DOCTYPE html>
<html>
<head lang="en">
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        html, body {
            margin: 0;
            width: 100%;
            height: 100%;
            background-color: #DFDFE0;
            display: -webkit-box;           /* OLD - iOS 6-, Safari 3.1-6 */
            display: -moz-box;              /* OLD - Firefox 19- (doesn't work very well) */
            display: -ms-flexbox;           /* TWEENER - IE 10 */
            display: -webkit-flex;          /* NEW - Chrome */
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-flex-direction: column;
            flex-direction: column;
        }
        * {
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -ms-box-sizing: border-box;
            box-sizing: border-box;
        }
        #detailMsgHeaderFake {
            width: 100%;
            height: 50px;
        }
        #detailMsgHeader {
            width: 100%;    height: 50px;
            position: absolute;
            top: 0;         left: 0;
            background-color: #FFFFFF;
            border: 1px solid #747474;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            -webkit-box-shadow:0px 5px 20px silver;
            -moz-box-shadow:0px 5px 20px silver;
            box-shadow:0px 5px 20px silver;
        }
        #detailMsgContent {
            border: 0;
            width: 100%;
            -webkit-box-flex: 1;            /* OLD - iOS 6-, Safari 3.1-6 */
            -moz-box-flex: 1;               /* OLD - Firefox 19- */
            -webkit-flex: 1;                /* Chrome */
            -ms-flex: 1;                    /* IE 10 */
            flex: 1;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }
        #detailMsgIframe {
            border: 0;
            width: 100%;
            height: 100%;
            border-left: 1px solid #747474;
            border-right: 1px solid #747474;
            border-bottom: 1px solid #747474;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }
    </style>
</head>
<body>
<div id="detailMsgHeaderFake"></div>
<div id="detailMsgHeader"></div>
<div id="detailMsgContent">
    <iframe id="detailMsgIframe" src="http://ko.learnlayout.com/"></iframe>
</div>
</body>
</html>


PS.
위와 같이 작업을 하고도 결국 flexbox를 사용할 수 없었는데..
div 안에있는 iframe의 height 를 100%로 해도 정상적으로 적용되지 않았다.
div를 빼고 iframe에 flexbox를 적용해 봤지만 iframe에는 flexbox가 적용되지 않았다.
(위에 적힌 내 Android 단말에서..)

결국 다음과 같은 방법으로 다르게 작업을 했다.
[CSS] Div 동적으로 사이즈(Width, Height) 변환 (또는 비어있는 나머지 영역 채우기)


댓글 없음 :

댓글 쓰기