[html] 전체 페이지 <iframe>

Program / 글쓴이

아래에 예제 코드가 있습니다. 이것은 모바일 장치의 브라우저를 제외한 모든 브라우저에서 잘 작동합니다.

오버플로 태그가 문제입니다.

모바일을 제외한 모든 제품에서 작동 :

margin: 0; padding: 0; height: 100%; overflow: hidden;

컴퓨터가 아닌 모든 모바일에서 작동 :

margin: 0; padding: 0; height: 100%;

두 가지 모두에서 작동하도록하는 가장 좋은 방법은 무엇입니까?

<!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>Test Layout</title>
        <style type="text/css">
            body, html
            {
                margin: 0; padding: 0; height: 100%; overflow: hidden;
            }
        </style>
    </head>
    <body>
        <iframe width="100%" height="100%" src="http://www.cnn.com" />
    </body>
</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>Test Layout</title>
        <style type="text/css">
            body, html
            {
                margin: 0; padding: 0; height: 100%; overflow: hidden;
            }

            #content
            {
                position:absolute; left: 0; right: 0; bottom: 0; top: 0px; 
            }
        </style>
    </head>
    <body>
        <div id="content">
            <iframe width="100%" height="100%" frameborder="0" src="http://cnn.com" />
        </div>
    </body>
</html>

답변

이것은 브라우저 간이며 완전히 반응합니다.

<iframe
  src="https://drive.google.com/file/d/0BxrMaW3xINrsR3h2cWx0OUlwRms/preview"
  style="
    position: fixed;
    top: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    border: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    z-index: 999999;
    height: 100%;
  ">
</iframe>

답변

이것을 CSS에 넣으십시오.

iframe {
  width: 100%;
  height: 100vh;
}

답변

이것은 내가 과거에 사용한 것입니다. 

html, body {
  height: 100%;
  overflow: auto;
}

또한 iframe다음 스타일을 추가하십시오.

border: 0; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%

답변

전체 화면 프레임 리디렉션 및 유사한 작업의 경우 두 가지 방법이 있습니다. 둘 다 모바일과 데스크톱에서 잘 작동합니다.

이것은 완전한 브라우저 간 작동, 유효한 HTML 파일입니다. 그냥 변경 title및 src사용자의 요구에. ASCII가 아닌 문자가 없으면
삭제를 고려할 수 있습니다 <meta charset>.

1. 이것은 내가 가장 좋아하는 :

<!DOCTYPE html>
<meta charset=utf-8>
<title> Title-1 </title>
<meta name=viewport content="width=device-width">
<style>
 html, body, iframe { height:100%; width:100%; margin:0; border:0; display:block }
</style>
<iframe src=src1></iframe>

<!-- More verbose CSS for better understanding:
  html   { height:100% }
  body   { height:100%; margin:0 }
  iframe { height:100%; border:0; display:block; width:100% } -->

또는 2. 약간 더 짧습니다.

<!DOCTYPE html>
<meta charset=utf-8>
<title> Title-2 </title>
<meta name=viewport content="width=device-width">
<iframe src=src2 style="position:absolute; top:0; left:0; width:100%; height:100%; border:0">
</iframe>

참고 :
보수적으로 위의 예는 height:100vh이전 브라우저가이를 알지 못하고 (요즘에는 논쟁의 여지가있을 수 있음) 모바일 브라우저에서 height:100vh항상 동일 하지는 않기 때문에 사용을 피 height:100%합니다 (아마 여기에서는 해당되지 않음). 그렇지 않으면 vh일을 약간 단순화하므로

3. 이것은 vh를 사용하는 예입니다 (내가 가장 좋아하는 것이 아니고, 약간의 이점이 있지만 덜 호환 됨).

<!DOCTYPE html>
<meta charset=utf-8>
<title> Title-3 </title>
<meta name=viewport content="width=device-width">
<style>
 body { margin:0 }
 iframe { display:block; width:100%; height:100vh; border:0 }
</style>
<iframe src=src3></iframe>

답변