これは、モバイルデバイスのウィンドウに合わせてiframe、画像、埋め込みのサイズを変更するための簡単なスクリプトです。私が抱えている問題は、ページの読み込み時に実行されず、代わりにウィンドウを更新またはサイズ変更した場合にのみ実行されることです。FirefoxとChromeでテストしたので、ブラウザの問題ではなく、コードの問題だと思います。
以下のスクリプトの前に、GoogleからjQuery1.7.2とjQueryMobile1.1.0を読み込んでいます。
$(window).bind("load", resizeMobile);
$(window).bind("resize", resizeMobile);
function resizeMobile() {
var h = $(window).height();
var w = ($(window).width() - 30);
var max_size = w;
$("embed, iframe, img").each(function (i) {
if ($(this).height() > $(this).width()) {
var h = max_size;
var w = Math.ceil($(this).width() / $(this).height() * max_size);
} else {
var w = max_size;
var h = Math.ceil($(this).height() / $(this).width() * max_size);
}
var url = $(this).attr('src');
//handle ih embeds
if (url.indexOf("/player/embed.html") > 0) {
$(this).attr("height", h).attr("width", w);
$(this).attr("src", $(this).attr("src")); //reload iframe to set new width and height
} else {
//$(this).attr("height", h).attr("width", w);
$(this).css({
height: h,
width: w
});
}
});
}
$(document).ready(resizeMobile);