<iframe> เต็มหน้า

Question 1

ฉันมีโค้ดตัวอย่างด้านล่าง ซึ่งใช้ได้ดีกับทุกเบราว์เซอร์ยกเว้นเบราว์เซอร์บนอุปกรณ์มือถือ

แท็กล้นคือปัญหา

ใช้ได้กับทุกคนยกเว้นมือถือ:

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>

Question 2

นี่คือรหัสการทำงาน ทำงานในเบราว์เซอร์เดสก์ท็อปและมือถือ หวังว่ามันจะช่วยได้ ขอบคุณสำหรับทุกคนที่ตอบกลับ

<!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>

Question 3

นี่คือข้ามเบราว์เซอร์และตอบสนองอย่างเต็มที่:

<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>

Question 4

ใส่สิ่งนี้ใน CSS ของคุณ

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

Question 5

นี่คือสิ่งที่ฉันเคยใช้ในอดีต

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

นอกจากนี้ในการiframeเพิ่มสไตล์ต่อไปนี้

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

Question 6

สำหรับการเปลี่ยนเส้นทางแบบเต็มหน้าจอและสิ่งที่คล้ายกันฉันมีสองวิธี ทั้งสองทำงานได้ดีบนมือถือและเดสก์ท็อป

โปรดทราบว่านี่เป็นการทำงานข้ามเบราว์เซอร์ไฟล์ HTML ที่ถูกต้อง เพียงแค่เปลี่ยนtitleและsrcสำหรับความต้องการของคุณ
คุณอาจพิจารณาปล่อยวาง<meta charset>หากคุณไม่มีอักขระที่ไม่ใช่ ASCII

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>