这是一个简单的脚本,用于调整 iframe、图像和嵌入的大小以适应移动设备的窗口。我遇到的问题是它不会在页面加载时运行,而是仅在您刷新或调整窗口大小时运行。我已经在 Firefox 和 Chrome 中进行了测试,所以我猜这不是浏览器的问题,而是代码的问题。
在下面的脚本之前,我正在从 Google 加载 jQuery 1.7.2 以及 jQuery Mobile 1.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);