Question

您好我有一个响应式设计的网站嵌入到另一个网站。但问题是，在移动设备和平板电脑上，嵌入式网站会响应设备窗口大小。代码发布如下。提前感谢您的帮助。

<!DOCTYPE html>
<html>
<header>

<script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
<style>
html, body {
    height: 100%;
}

div {
    height: 99%;
}

object {
    width: 100%;
    min-height: 100%;
}       
</style>

<script>

$(document).ready(function() {

    $("#siteloader").html('<object data="www.responsivesite.com" />');

});
</script> 


</header>



<body>

<div id="siteloader"></div>








</body>






</html>

Answer 1

使用iframe嵌入其他页面。然后将根据iframe的宽度处理媒体查询。例如，

窗口宽度 - 480px
iframe宽度 - 100％
@media（max-width：480px）将触发。

窗口宽度 - 480px
iframe宽度 - 80％
@media（max-width：480px）不会触发。

Answer 2

把它放在html

的头上

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

Source

如何在不丢失网站设计响应的情况下在网站中嵌入自适应网站？

2 个答案: