Translate

[HTML][iOS] iframe의 width와 height 가 적용되지 않는문제






테스트 기기
기종: iPhone 5S
iOS version: 7.0.6
Browser: Safari





문제

iframe 의 사이즈(width, height)가 적용되지 않는다.
(아래의 코드가 예상한대로 보여지지 않는다.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
<iframe style="border: 1px solid green; height: 150px; width: 150px; overflow: scroll; -webkit-overflow-scrolling: touch;" src="http://www.apple.com/"></iframe>
</body>
</html>






대처방안

1. iframe 을 Div 로 감싸고 Div 에 스크롤을 넣는방법

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1,  user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        #wrap {
            width: 320px;
            height: 400px;
            position: relative;
            overflow-x: hidden;
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
        }
        #inner {
            width: 320px;
            height: 100%;

            /* Android 이중 스크롤 방지 */
            position:absolute; top:0; left:0;
        }
    </style>
</head>
<body>
<div id="wrap">
    <iframe id="inner" src="http://www.apple.com"></iframe>
</div>
</body>
</html>






2. 내부의 링크를 iframe에 넣어서 사용한다면 iframe 내부의 HTML 사이즈를
유동적으로 조정하고 내부는 스크롤로 처리를 한다.
  (외부의 링크를 iframe에 넣어서 사용하는 것은 사용 할 수 없다.)


outer.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1,  user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<iframe style="border: 1px solid green; height: 150px; width: 150px; overflow: scroll; -webkit-overflow-scrolling: touch;" src="./inner.html"></iframe>
</body>
</html>




inner.html
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #wrapper {
            width: 100%;
            height: 100%;
            overflow: auto;
        }
    </style>
</head>
<body>

<div id="wrapper">
    content

    content

    content

    content

    content

    content

    content

    content

    content

    content

    content

    content

    content

    content

    content

    content

    content

</div>

</body>
</html>





3. 또는 아래의 링크와 같이 iframe 높이와 맞춰 버리는 방법이 있다.
[Android] Android 2.x 에서 iframe 엘리먼트의 Scroll, Height 속성이 적용되지 않는 문제





댓글