个人中心
gpt4 book ai didi

javascript - 是否可以在非响应式网站中加载响应式 iframe？

转载 作者：技术小花猫 更新时间：2023-10-29 12:08:24 24 4
gpt4 key购买 nike

在您将其标记为重复之前，让我告诉您，这与使 iframe 可重新缩放无关，而且我不期待这样的答案:Making an iframe responsive

我的问题很容易解释:我得到一个没有 meta viewport 标签且宽度为(比方说)1000px 的网站。因此，当您将它加载到移动设备时，它会重新缩放以适应 360 像素的宽度，并且一切都非常小。

现在，我完全知道如何使 iframe 调整到任何宽度，但这里的问题是正在加载的网站也会以 1000px 的宽度显示，即使这个网站有 meta 视口(viewport)标签。当然，此 iframe 中的所有内容也显示得非常小。

现在的问题是:我能否使该 iframe 的内容以全宽显示，同时不遵循父文档的宽度而是遵循设备的宽度。 (显然我不想要一个小的 360px iframe)。

这可能有助于您理解:enter image description here

编辑:很多人似乎不明白这一点，所以另一种解释方式是:

  1. 选择任何没有视口(viewport)标签的网站

  2. 在上面画一个固定框

  3. 并尝试使 iframe 看起来像是在新选项卡上打开的(默认情况下，iframe 的视口(viewport)大小为 1000 像素，我希望它是手机的视口(viewport)大小)

最佳答案

如果我正确理解您的问题，是的是有可能的，但由于我无法在 fiddle 中复制这种情况，下面是我测试成功的代码:

无响应网站(无元 viewport 链接)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>The non-responsive site</title>
<style type="text/css">
body {
    margin:0;
    padding:0;
}
#wrapper {
    width:1000px;
    margin:0 auto;
}
iframe {
    max-width:1000px;
    width:100%;
    margin:10px auto;
    display:block;
    min-height:400px;
    border:0 
}
</style>
</head>   
<body>
    <div id="wrapper">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae orci a velit pretium commodo. Vivamus ultrices auctor lectus, non semper ipsum dictum eu. Integer nulla arcu, bibendum ac hendrerit at, scelerisque in augue. Proin a nisi et purus pulvinar blandit. Nulla ac diam congue, malesuada nunc vitae, aliquam quam. Praesent volutpat turpis eu orci volutpat iaculis. Vivamus tempus varius sagittis. Sed sollicitudin, dui ac finibus placerat, ante metus volutpat dui, eu feugiat ipsum erat nec libero. Quisque eu viverra ex, sit amet congue orci. Cras porta dignissim diam, in eleifend urna vulputate sit amet. Mauris in malesuada ligula, eget facilisis nisl. Maecenas non enim orci. Nullam porttitor fringilla velit a sodales. Suspendisse et accumsan mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. 
    </div>
    <iframe src="responsive-iframe.html"></iframe>
</body>
</html>

响应式 iframe(元 viewport 链接)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
body {
    margin:0;
    padding:0;
}

p {
    color:red;
    font-size:32px;
    background-color:#FEB1C7
}
@media (max-width: 480px) {
    p {
        color:green;
        font-size:48px;
        background-color:#CF0
    }
}
</style>
</head> 
<body>
    <p>I'm green below 480px width, otherwise I'm red</p>
</body>
</html>

注意: <head> 中上面的 CSS标签只是制作此演示的一种快速方法，我始终建议使用外部 CSS 文件。

更新:(我更新了代码以匹配下面的 SS)

  • NON-RESPONSIVE 网站的屏幕截图

enter image description here

  • iframe 响应网站的屏幕截图

iFRAME-RESPONSIVE

关于javascript - 是否可以在非响应式网站中加载响应式 iframe？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30595948/

24 4 0
文章推荐： html - 在 div 中最大化和居中显示视频标签
文章推荐： c - PAM 的不同访问级别
文章推荐： c - 如何使用 XLib 调整像素图的大小？
文章推荐： linux - 套接字和文件描述符重用(或缺乏)
技术小花猫
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com