<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.wrap1{width: 320px;height:377px;}
.wrap2{width: 1370px;height: 553px;}
iframe{width: 100%;height: 100%;border: none;height: 100%;}
</style>
</head>
<body>
<h1></h1>
<div class="wrap1"><iframe src="currency.html"></iframe></div>
<div class="wrap2"><iframe src="map.html"></iframe></div>
</body>
</html>
//currentcy.html
@media screen and (max-width:767px) {
.c-width{
width: auto;
}
.custom-til .custom-til-text{
width: 268px;
}
.custom-til-fr{
display: block;
}
}
@media screen and (min-width:992px) {
.currency-container{
max-height: 377px !important;
}
} We have an online responsive website and want to leave a few places for the home page to display the pages of other data modules. It is introduced through iframe.
I have made several corresponding pages that are also responsive, using the @ media of css3 to control the display style of pc and mobile. It"s okay to test alone, but there"s a problem when you put it in iframe. Currentcy pages in iframe are not based on the width of the browser, but on the actual size of the iframe. Is there any way to solve this?
the original website has jquery, and I have to introduce jquery in the currentcy page, otherwise I can"t use it. Why can"t the page in iframe use the jquery file of the main page?