div内にIframeをラップし、別のメディアを使用してiフレームの寸法を制御できます。
browser_ = /iPhone|iPad/i.test(navigator.userAgent);
isInIframe = (window.location != window.parent.location) ? true : false;
iframe {
border: 0;
}
@media handheld,
only screen and (max-width: 320px) {
.ReferAFriendWrapper {
height: 1190px;
}
}
@media handheld,
only screen and (min-width: 321px) and (max-width: 479px) {
.ReferAFriendWrapper {
height: 1190px;
}
}
@media handheld,
only screen and (min-width: 480px) and (max-width: 639px) {
.ReferAFriendWrapper {
height: 960px;
}
}
@media handheld,
only screen and (min-width: 640px) and (max-width: 750px) {
.ReferAFriendWrapper {
height: 760px;
}
}
@media handheld,
only screen and (min-width: 751px) and (max-width: 768px) {
.ReferAFriendWrapper {
height: 600px;
}
}
@media handheld,
only screen and (min-width :769px) and (max-width: 900px) {
.ReferAFriendWrapper {
height: 540px;
}
}
@media handheld,
only screen and (min-width :901px) and (max-width: 1078px) {
.ReferAFriendWrapper {
height: 500px;
}
}
@media handheld,
only screen and (min-width :1079px) and (max-width :1200px) {
.ReferAFriendWrapper {}
}
.ReferAFriendWrapper {
position: relative;
padding-bottom: 70%;
/* 16:9 */
padding-top: 25px;
margin-top: -0px;
overflow: hidden;
}
.ReferAFriendWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
}
<div style="-webkit-overflow-scrolling: touch !important;">
<iframe src="http://stackoverflow.com/questions/5661868/asp-net-calling-javascript-in-user-control-server-side-method" scrolling="no" border="0" width="800"></iframe>
</div>
申し訳ありませんが、iframeのコンテンツのCSSオーバーライドボディスタイルを解決できません。 アクセスできない別のサーバーからのページのスタイルを変更したい、iframeだけで –