테스트 기기
기종: 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 속성이 적용되지 않는 문제
댓글
댓글 쓰기