จะทำให้ IFrame ตอบสนองใน iOS Safari ได้อย่างไร

134

ปัญหาคือเมื่อคุณต้องใช้ IFrames เพื่อแทรกเนื้อหาลงในเว็บไซต์จากนั้นในโลกเว็บสมัยใหม่คาดว่า IFrame จะตอบสนองได้เช่นกัน ในทางทฤษฎีมันง่ายเพียงแค่ผู้ช่วยใช้<iframe width="100%"></iframe>หรือตั้งค่าความกว้างของ CSS iframe { width: 100%; }อย่างไรก็ตามในทางปฏิบัติมันไม่ได้ง่ายขนาดนั้น แต่ก็สามารถทำได้

หากiframeเนื้อหาตอบสนองอย่างสมบูรณ์และสามารถปรับขนาดได้เองโดยไม่มีแถบเลื่อนภายใน iOS Safari จะปรับขนาดiframeโดยไม่มีปัญหาใด ๆ

หากคุณพิจารณารหัสต่อไปนี้:

<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=9,10,11" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Iframe Isolation Test</title>

    <style type="text/css" rel="stylesheet">

        #Main {
            padding: 10px;
        }
    </style>
</head>
<body>
    <h1>Iframe Isolation Test 13.17</h1>
    <div id="Main">
        <iframe height="950" width="100%" src="Content.html"></iframe>
    </div>
</body>
</html>

ด้วยContent.html :

<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=9,10,11" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Iframe Isolation Test - Content</title>

    <style type="text/css" rel="stylesheet">

        #Main {
            width: 100%;
            background: #ccc;
        }

    </style>
</head>
<body>
    <div id="Main">
        <div id="ScrolledArea">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc malesuada purus quis commodo convallis. Fusce consectetur mauris eget purus tristique blandit. Nam nec volutpat augue. Aliquam sit amet augue vitae orci fermentum tempor sit amet gravida augue. Pellentesque convallis velit eu malesuada malesuada. Aliquam erat volutpat. Nam sollicitudin nulla nec neque viverra, non suscipit purus tincidunt. Aenean blandit nisi felis, sit amet ornare mi vestibulum ac. Praesent ultrices varius arcu quis fringilla. In vitae dui consequat, rutrum sapien ut, aliquam metus. Proin sit amet porta velit, suscipit dignissim arcu. Cras bibendum tellus eu facilisis sodales. Vestibulum posuere, magna ut iaculis consequat, tortor erat vulputate diam, ut pharetra sapien massa ut magna. Donec massa purus, pharetra sed pellentesque nec, posuere ut velit. Nam venenatis feugiat odio quis tristique. 
        </div>      
    </div>
</body>
</html>

จากนั้นใช้งานได้โดยไม่มีปัญหาใน iOS 7.1 Safari คุณสามารถเปลี่ยนระหว่างแนวนอนและแนวตั้งได้โดยไม่มีปัญหาใด ๆ

ป้อนคำอธิบายภาพที่นี่ ป้อนคำอธิบายภาพที่นี่

อย่างไรก็ตามเพียงแค่เปลี่ยนContent.html CSS โดยเพิ่มสิ่งนี้:

    #ScrolledArea {
        width: 100%;
        overflow: scroll;
        white-space: nowrap;
        background: #ff0000;
    }

คุณจะได้รับสิ่งนี้:

ป้อนคำอธิบายภาพที่นี่ ป้อนคำอธิบายภาพที่นี่

อย่างที่คุณเห็นแม้ว่าเนื้อหาContent.htmlจะตอบสนองอย่างสมบูรณ์ ( div # ScrolledAreaได้overflow: scrollตั้งค่าไว้) และความกว้างของ iframe คือ 100% แต่ iframe ยังคงใช้ความกว้างเต็มของdiv # ScrolledAreaราวกับว่าไม่มีโอเวอร์โฟลว์ การสาธิต

ในกรณีเช่นนี้iframeเนื้อหามีพื้นที่เลื่อนอยู่หรือไม่คำถามกลายเป็นวิธีรับการiframeตอบสนองเมื่อเนื้อหา iframe มีพื้นที่เลื่อนในแนวนอน ปัญหาที่นี่ไม่ได้อยู่ที่Content.htmlไม่ตอบสนอง แต่ในความเป็นจริง iOS Safari เพียงแค่ปรับขนาด iframe เพื่อให้div#ScrolledAreaสามารถมองเห็นได้อย่างสมบูรณ์

html  css  iframe 
— Idra
แหล่งที่มา
คุณช่วยแชร์ลิงค์กับเราได้ไหม? คุณกำลังบอกว่า iOS จะขยาย iFrame ให้เต็มความกว้างของหน้าหากหน้าภายในมีเนื้อหาที่มีwhite-space: nowrapสไตล์?
— DA.
@DA ฉันเพิ่มการสาธิตให้กับทั้งปัญหาและวิธีแก้ปัญหา และไม่white-space: nowrapในตัวมันเองไม่ใช่ปัญหา div#ScrolledAreaฉันกำลังเพียงแค่ใช้มันเพื่อให้ได้ความกว้างมากไป ปัญหาเกิดขึ้นเมื่อเนื้อหา IFrame มีพื้นที่ที่เลื่อนได้ในแนวนอน หากเป็นเช่นนั้น iOS Safari จะละเว้นการตั้งค่าความกว้างของคุณและแสดงเนื้อหาของรูและทำลายการตอบสนองของไซต์
— Idra
อืม ... ฉันสงสัยว่านั่นคือ 'คุณสมบัติ' คงเป็นเรื่องน่าอึดอัดที่จะมีพื้นที่ที่เลื่อนได้ (iFrame) ที่มีเนื้อหาที่เลื่อนได้ มันเป็นสิ่งที่ยากมากในการโต้ตอบบนหน้าจอสัมผัส
— DA.
@DA แน่นอนว่านี่เป็นกรณีของหลานสาวและสิ่งที่คุณพูดอาจเป็นความจริง (ขึ้นอยู่กับการนำไปใช้งานสำหรับเรา) และไซต์ส่วนใหญ่ไม่มีพื้นที่เลื่อนในแนวนอน แต่เมื่อคุณทำ ... คุณไม่สามารถจินตนาการได้ ฉันใช้เวลากับเรื่องนี้ไปเท่าไหร่ แต่อาจเป็นปัญหาได้แม้ว่าคุณจะมีรูปภาพที่ซ่อนอยู่และเลื่อนด้วยปุ่มหรืออะไรทำนองนั้นก็ตาม
— Idra
ดูเหมือนว่าจะมีคำถามที่เกี่ยวข้องเกี่ยวกับเรื่องนี้: stackoverflow.com/questions/5267996/…ดูเหมือนว่าจะเป็น 'คุณลักษณะ' ของซาฟารีมือถือ ... พยายามทำให้แน่ใจว่าเนื้อหามีขนาดตามที่ผู้ใช้สามารถทำได้ ยังคงโต้ตอบกับมัน ฉันไม่แน่ใจว่าจะเกิดอะไรขึ้นถ้าคุณมีการเลื่อนเนื้อหาใน iframe แบบเลื่อน ... Safari จะตีความการปัดภายในองค์ประกอบการเลื่อนแบบซ้อนกันอย่างไร
— DA.

คำตอบ:

291

วิธีแก้ปัญหานี้ค่อนข้างง่ายและมีสองวิธีในการแก้ไข หากคุณสามารถควบคุมContent.html ได้ให้เปลี่ยนdiv#ScrolledAreaCSS ความกว้างเป็น:

        width: 1px;
        min-width: 100%;
        *width: 100%;

โดยทั่วไปแนวคิดที่นี่เป็นเรื่องง่ายคุณตั้งค่าเป็นwidthสิ่งที่เล็กกว่าวิวพอร์ต (ในกรณีนี้คือความกว้างของ iframe) แล้วเขียนทับด้วยmin-width: 100%เพื่อให้width: 100%iOS Safari เขียนทับตามค่าเริ่มต้น *width: 100%;มีดังนั้นรหัสจะยังคง IE6 เข้ากันได้ แต่ถ้าคุณไม่ดูแล IE6 คุณสามารถละเว้นมัน การสาธิต

ป้อนคำอธิบายภาพที่นี่ ป้อนคำอธิบายภาพที่นี่

อย่างที่คุณเห็นตอนนี้div#ScrolledAreaความกว้างนั้นแท้จริงแล้ว 100% และoverflow: scroll;สามารถทำได้และซ่อนเนื้อหาที่ล้นออกมา หากคุณสามารถเข้าถึงเนื้อหา iframe ได้แนะนำให้ใช้สิ่งนี้

อย่างไรก็ตามหากคุณไม่สามารถเข้าถึงเนื้อหา iframe ได้ (ด้วยเหตุผลใดก็ตาม) คุณสามารถใช้เทคนิคเดียวกันกับ iframe ได้ เพียงใช้ CSS เดียวกันบน iframe:

    iframe {
        width: 1px;
        min-width: 100%;
        *width: 100%;
    }

อย่างไรก็ตามมีข้อ จำกัด ประการหนึ่งคือคุณต้องปิดแถบเลื่อนด้วยscrolling="no"บน iframe เพื่อให้สิ่งนี้ใช้งานได้:

<iframe height="950" width="100%" scrolling="no" src="Content.html"></iframe>

หากอนุญาตแถบเลื่อนสิ่งนี้จะไม่สามารถใช้งานได้กับ iframe อีกต่อไป ที่กล่าวว่าหากคุณแก้ไขContent.htmlแทนคุณสามารถคงการเลื่อนใน iframe ได้ การสาธิต

— Idra
แหล่งที่มา
1
เช่นเดียวกับที่กล่าวถึง @NickGottlieb ผมต้องเพิ่ม!importantให้กับwidthแอตทริบิวต์ที่จะได้รับการตอบสนองจาก iframe เว็บออกแบบพร้อมใน iPhone 4 กับ iOS 7
— malisokan
@ ЮнгвиртТониไม่จำเป็นสำหรับวิธีแก้ปัญหาในการทำงานเป็นไปได้ว่าการwidthตั้งค่าก่อนหน้านี้โดย!importantมี CSS ลำดับความสำคัญสูงกว่าหรือเขียนทับมัน ในบางกรณีใน iPhone 4 iOS7 ไม่จำเป็น
— Idra
ฉันไม่ต้องการ! สำคัญเหมือนกัน ใช้งานได้ดีบน iOS 8 ด้วย Cheers
— Sam Potts
ฉันต้องการการเลื่อน = ไม่เมื่อจำเป็นเท่านั้นมิฉะนั้นจะเลื่อน = ใช่ ฉันควรตรวจจับอะไร? นี่เป็นปัญหาของ iOS หรือไม่ หรือปัญหาเกี่ยวกับ webkit? หรือ...?
— gerbz
@ggwarpig นี่เป็นปัญหาของ iOS โดย iOS Safari จะเปิดแอตทริบิวต์ที่ไร้รอยต่อโดยอัตโนมัติและคุณไม่สามารถเขียนทับได้ หากคุณสามารถควบคุมเนื้อหาได้คุณจะต้องแก้ไขเนื้อหาเพื่อให้scrolling="yes"ไม่มีวิธีใดในการแก้ไขปัญหานี้เพื่อให้การแก้ไขทำงานบน IFRAME เฉพาะที่คุณต้องมีscrolling="no"ใน IFRAME
— Idra
24

ดูเหมือนว่าปัญหาคือ Mobile Safari จะปฏิเสธที่จะปฏิบัติตามความกว้างของ iFrame ของคุณหากเอกสารในนั้นกว้างกว่าที่คุณระบุไว้ ตัวอย่าง:

http://jsbin.com/hapituto/1

บนเบราว์เซอร์บนเดสก์ท็อปคุณจะเห็น iFrame และ Div ตั้งค่าเป็น 300px เนื้อหากว้างขึ้นเพื่อให้คุณเลื่อน iFrame ได้

อย่างไรก็ตามในซาฟารีมือถือคุณจะสังเกตเห็นว่า iFrame จะขยายอัตโนมัติตามความกว้างของเนื้อหา

ฉันเดาว่านี่เป็นวิธีแก้ปัญหาสำหรับปัญหาที่เกิดขึ้นเป็นเวลานานเกี่ยวกับการเลื่อนเนื้อหาภายในหน้า ในอดีตหากคุณมี iframe แบบเลื่อนขนาดใหญ่บนอุปกรณ์สัมผัสคุณจะ 'ติด' อยู่ใน iframe เนื่องจากจะเป็นการเลื่อนแทนที่จะเป็นหน้านั้นเอง ดูเหมือนว่า Apple ได้ตัดสินใจว่าพฤติกรรมเริ่มต้นของ iFrame คือ 'ไม่เลื่อน' และขยายเพื่อป้องกัน

ทางเลือกหนึ่งอาจเป็นวิธีแก้ปัญหานี้ แทนที่จะสมมติว่า iFrame จะเลื่อนให้วาง iframe ใน DIV ที่คุณมีสิทธิ์ควบคุมและปล่อยให้เลื่อนนั้น

ตัวอย่าง: http://jsbin.com/zakedaja/1

ตัวอย่างมาร์กอัป:

<div style="overflow: scroll; -webkit-overflow-scrolling: touch; width: 300px;">
   <iframe src="http://jsbin.com/roredora/1/" style="width: 600px;"></iframe>
</div>

ในซาฟารีมือถือตอนนี้คุณสามารถเลื่อนเนื้อหาของ iFrame ที่ขยายเต็มได้แล้วผ่าน div ที่มีอยู่

สิ่งที่จับได้: สิ่งนี้ดูน่าเกลียดมากบนเบราว์เซอร์เดสก์ท็อปเนื่องจากตอนนี้คุณมีแถบเลื่อนสองอัน ดังนั้นคุณอาจต้องทำการตรวจหาเบราว์เซอร์ด้วย JS เพื่อแก้ไขปัญหานี้

— DA.
แหล่งที่มา
1
ฉันจะยังคงยืนยันว่านี่ไม่ได้อยู่ในขอบเขตของคำถามจริงๆเพราะวิธีแก้ปัญหาที่คุณแสดงที่นี่เป็นวิธีมาตรฐานในการปลอมการเลื่อนiframe ของรูใน iOS Safari แต่เมื่อพิจารณาถึงปัญหา iOS นี้เป็นปัญหาเกี่ยวกับการเลื่อน IFrame (เนื้อหาหรืออย่างอื่น) ก็ดีที่มีที่นี่
— Idra
1
ฉันเดาว่าฉันไม่เข้าใจคำถามของคุณทั้งหมด จากสิ่งที่ฉันเข้าใจปัญหาที่คุณพบคือใน iOS Mobile Safari พยายามป้องกันไม่ให้ iFrame เลื่อนตั้งแต่แรกและบังคับให้มีความกว้าง ฉันเข้าใจปัญหาของคุณผิดหรือเปล่า?
— DA.
ในสาระสำคัญนั่นคือปัญหาเพียงวิธีการแก้ปัญหาที่ต้องการนั้นแตกต่าง ในปัญหาเริ่มต้นเนื้อหา IFrame ตอบสนองได้ดีในขณะที่มีเนื้อหาที่เลื่อนในแนวนอนดังนั้นคำถามจึงไม่ใช่วิธีจำลองการเลื่อนiframeแต่จะทำอย่างไรให้ความกว้างของ iframe เป็นแบบตอบสนอง 100% ในขณะที่คุณเลื่อนเนื้อหาในแนวนอนด้วยใน iframe นั้น นั่นเป็นเหตุผลที่วิธีการข้างต้นใช้ไม่ได้ในกรณีนี้เนื่องจากการตอบสนองที่ออกแบบมานั้นใช้งานไม่ได้และคุณต้องเลื่อนไปรอบ ๆ เพื่อดูเนื้อหาทั้งหมดแม้ในสถานที่จะเป็นไปตามการออกแบบที่คุณไม่จำเป็นต้องทำ
— Idra
1
ฉันขอโทษฉันตระหนักว่าฉันทำให้คุณเข้าใจผิดในหนึ่งในความคิดเห็น iframe ไม่เลื่อน นั่นคือประเด็นที่ iframe ไม่ควรเลื่อนเฉพาะบางส่วนของเนื้อหานั่นคือdiv#ScrolledArea(เป็นสีเขียว) ในตัวอย่างของฉัน ฉันเพิ่งอ่านผิดมาก่อน แต่ iframe ไม่ควรเลื่อนเฉพาะการปรับขนาดตัวเองตามองค์ประกอบคอนเทนเนอร์เช่น havewidth: 100%;
— Idra
18

ฉันต้องการโซลูชันข้ามเบราว์เซอร์ ข้อกำหนดคือ:

  • จำเป็นต้องใช้งานได้ทั้งบน iOS และที่อื่น ๆ
  • ไม่มีสิทธิ์เข้าถึงเนื้อหาใน iFrame
  • ต้องเลื่อน!

สร้างสิ่งที่ฉันเรียนรู้จาก@Idraเกี่ยวกับการเลื่อน = "ไม่" บน iOS และโพสต์เกี่ยวกับการปรับเนื้อหา iFrame ให้พอดีกับหน้าจอใน iOS นี่คือสิ่งที่ฉันลงเอยด้วย หวังว่ามันจะช่วยใครสักคน =)

HTML

<div id="url-wrapper"></div>

CSS

html, body{
    height: 100%;
}

#url-wrapper{
    margin-top: 51px;
    height: 100%;
}

#url-wrapper iframe{
    height: 100%;
    width: 100%;
}

#url-wrapper.ios{
    overflow-y: auto;
    -webkit-overflow-scrolling:touch !important;
    height: 100%;
}

#url-wrapper.ios iframe{
    height: 100%;
    min-width: 100%;
    width: 100px;
    *width: 100%;
}

JS

function create_iframe(url){

    var wrapper = jQuery('#url-wrapper');

    if(navigator.userAgent.match(/(iPod|iPhone|iPad)/)){
        wrapper.addClass('ios');
        var scrolling = 'no';
    }else{
        var scrolling = 'yes';
    }

    jQuery('<iframe>', {
        src: url,
        id:  'url',
        frameborder: 0,
        scrolling: scrolling
    }).appendTo(wrapper);

}
— Gerbz
แหล่งที่มา
1
โหวตแล้ว แต่ ... ทำไมกฎ IE6 ในคลาส "ios"? :-)
— J. Bruni
12

ปัญหาในการแก้ปัญหาเหล่านี้คือความสูงของiframeไม่เคยเปลี่ยนแปลงจริงๆ

ซึ่งหมายความว่าคุณจะไม่สามารถจัดกึ่งกลางองค์ประกอบภายในการiframeใช้ Javascript ได้position:fixed;หรือposition:absolute;เนื่องจากiframeตัวมันเองไม่เคยเลื่อน

รายละเอียดวิธีแก้ปัญหาของฉันที่นี่คือการรวมเนื้อหาทั้งหมดของ iframe ไว้ในไฟล์divโดยใช้ CSS นี้:

#wrap {
    position: fixed;
    top: 0;
    right:0;
    bottom:0;
    left: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

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

คุณสามารถดูการสาธิตอย่างรวดเร็วและสกปรกได้ที่นี่

— ท่าเรือ
แหล่งที่มา
1
นี่เป็นทางออกเดียวที่ใช้ได้ผลสำหรับฉัน แน่นอนว่าสามารถใช้ได้ก็ต่อเมื่อคุณควบคุมเนื้อหาของiframeแต่ในกรณีของฉันฉันทำ ไชโย!
— Vince
อืม. ตัวอย่างของคุณดูเหมือนจะไม่ตอบสนองบน iOS?
— BrandonReid
เมื่อ 2 ปีก่อนตอนที่ฉันเขียนสิ่งนี้ คุณสามารถยื่นปัญหาใน repo ได้หรือไม่?
— ท่าเรือ
หลังจากเสียเวลาไปหลายชั่วโมงกับปัญหานี้กับ Ionic / Cordova บน iOS นี่เป็นสิ่งเดียวที่ใช้ได้ผล ขอบคุณ!
— Andrew
1
มันยอดเยี่ยมมากที่ได้ผลฉันใช้เวลา 1 วันในการค้นหาวิธีแก้ปัญหาแบบนี้ @Pier 100pts ถึงคุณ
— Carlos E
5

ปัญหานี้ยังปรากฏใน iOS Chrome

ฉันมองดูวิธีแก้ปัญหาทั้งหมดข้างต้นส่วนใหญ่แฮ็คมาก

หากคุณไม่ต้องการการสนับสนุนสำหรับเบราว์เซอร์รุ่นเก่าเพียงแค่ตั้งค่าความกว้างของ iframe เป็น 100vw

iframe {
  max-width: 100%; /* Limits width to 100% of container */
  width: 100vw; /* Sets width to 100% of the viewport width while respecting the max-width above */
}

หมายเหตุ: ตรวจสอบการสนับสนุนสำหรับหน่วยวิวพอร์ต https://caniuse.com/#feat=viewport-units

— ประธาเมศร์ Gharat
แหล่งที่มา
1
Chrome สำหรับ iOS เป็นเพียง Safari ที่อยู่ข้างใต้ ใช้ WKWebView ไม่อนุญาตให้ใช้เครื่องมือการแสดงผลเว็บอื่นใน iOS
— ท่าเรือ
3

ฉันกำลังทำงานกับ ionic2 และการกำหนดค่าระบบดังต่อไปนี้ - 

******************************************************

Your system information:

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.0-beta.10
Ionic CLI Version: 2.1.8
Ionic App Lib Version: 2.1.4
ios-deploy version: Not installed
ios-sim version: 5.0.8 
OS: OS X Yosemite
Node Version: v6.2.2
Xcode version: Xcode 7.2 Build version 7C68



******************************************************

สำหรับฉันปัญหานี้ได้รับการแก้ไขด้วยรหัสนี้ -
สำหรับ html iframe tag-

<div class="iframe_container">
      <iframe class= "animated fadeInUp" id="iframe1" [src]='page' frameborder="0" >
        <!--  <img src="img/video-icon.png"> -->
      </iframe><br>
   </div>

ดู css ที่เหมือนกับ - 

.iframe_container {
  overflow: auto; 
  position: relative; 
  -webkit-overflow-scrolling: touch;
  height: 75%;
}

iframe {
  position:relative;
  top: 2%;
  left: 5%;
  border: 0 !important;
  width: 90%;
}

คุณสมบัติของตำแหน่งมีบทบาทสำคัญในกรณีของฉัน
ตำแหน่ง: ญาติ;

มันอาจช่วยคุณได้เช่นกัน !!!

— S.Yadav
แหล่งที่มา
0

โซลูชัน CSS เท่านั้น

HTML

<div class="container">
    <div class="h_iframe">
        <iframe  src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

CSS

html,body {
    height:100%;
}
.h_iframe iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

การสาธิต

การสาธิตอื่นที่นี่พร้อมหน้า HTML ใน iframe

— 4dgaurav
แหล่งที่มา
บางทีฉันอาจใช้โซลูชันของคุณไม่ถูกต้อง แต่เมื่อฉันลองใช้กับกรณีทดสอบแยกของฉันแล้วมันไม่ได้ผลเลยใน iOS Safari 7.1 iPhone 4 คุณช่วยอธิบายอย่างละเอียดเกี่ยวกับวิธีการนี้ได้หรือไม่?
— Idra
ตกลงมันเหมือนคุณเข้าใจปัญหาผิดตรวจสอบลิงค์นี้ว่าเป็นเนื้อหา iframe สาธิตใหม่ของคุณที่รวมเข้าด้วยกันโดยไม่ต้องใช้ CSS เพิ่มเติมใด ๆ กับ iframe และหากคุณดูใน iOS Safari แสดงว่ายังตอบสนองได้นั่นเป็นเพราะหน้านี้ไม่มีการเลื่อนแนวนอนที่จะบังคับให้ความกว้าง iframe กว้างกว่าวิวพอร์ต ตามที่อธิบายไว้ในคำถามบนไซต์เช่นนี้คุณไม่จำเป็นต้องทำอะไรเพื่อให้ iframe ตอบสนอง
— Idra
ดังนั้นสิ่งที่คุณต้องการให้มันทำงานตัวอย่างเช่นสำหรับลิงค์ของคุณ?
— 4dgaurav
0

ฉันมีปัญหาเกี่ยวกับความกว้างในบานหน้าต่างเนื้อหาในการสร้างแถบเลื่อนแนวนอนสำหรับ iframe ปรากฎว่าภาพมีความกว้างมากกว่าที่คาดไว้ ฉันสามารถแก้ได้โดยตั้งค่า css max-width ทั้งหมดเป็นเปอร์เซ็นต์

<meta name="viewport" content="width=device-width, initial-scale=1" />

img {
        max-width: 100%;
        height:auto;
    }
— ดร. แอรอนดิชโน
แหล่งที่มา
0

ในความเป็นจริงสำหรับฉันเพิ่งทำงานใน iOS ปิดการใช้งานการเลื่อน

<iframe src="//www.youraddress.com/" scrolling="no"></iframe>

และปฏิบัติกับระบบปฏิบัติการผ่านสคริปต์

— Luiz Rossi
แหล่งที่มา
0

สำหรับฉันโซลูชัน CSS ไม่ได้ผล แต่การตั้งค่าความกว้างโดยทางโปรแกรมจะทำงานได้ ในการโหลด iframe ให้ตั้งค่าความกว้างโดยทางโปรแกรม:

 $('iframe').width('100%');
— อุเมอร์
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.