您的位置：首页 > 移动开发

ios web App 使正文中的图片、视频根据屏幕尺寸自适应

2011-10-21 21:26 417 查看

设计一个专门为android或iphone优化的网页通常会将页面与手机浏览器设置成1:1大小(禁止手册浏览器缩放).

这时候每个手机的屏幕尺寸都不一致(包括横屏竖屏)，例如当你浏览一篇文章时，正文的文字可以根据手机屏幕的尺寸自动换行，但图片、视频、iframe等这些对象不能够自适应屏幕。

现在需要获得到手机屏幕的物理尺寸，例如屏幕的寛是230*480那么正文中的图片最大宽度就为230px,;若横屏时图片的最大宽度为480px;以下是我的解决办法:

1.首先在页面中放一个 id=mviewport的div容器,令它充满等个屏幕,当设置initial-scale=1时这个div的宽度与高度就是屏幕尺寸.(为什么不用window.screen.width和window.screen.height呢？因为window.screen.width获得的是手机浏览器的viewport尺寸而不是屏幕的尺寸)

<head>

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />

</head>

<body>

<div id='mviewport' style="position:absolute; width:99%; height:99%; left:0; top:0;display:none;"></div>;

</body>

2.这是让尺寸改变时，图片自适应的一个简单的方法。让图片的max-width等于 $('#mviewport').width();，这种方法只用在没有被设置height属性的img标签，因为一旦设置了高度宽度拉伸后将会变形，而且像 embed iframe等标签不会自动根据宽度的改变调整高度。

window.onresize=function(){
changesize();
};

//--------------------
//调整文章正文内的各个元素尺寸
//--------------------
function changesize(){
var vw = $('#mviewport').width();
var vh = $('#mviewport').height();
$("#article_content img").css('max-width',vw);
}
3.以下的通过遍历正文中的 img 和 embed标签，按比例缩放.其中img标签，先通过$(n).removeAttr('width');和$(n).removeAttr('height');移除了原先的图片尺寸，接着在用$(n).attr('yw',n.width);和$(n).attr('yh',n.height);获得原图的尺寸.

window.onresize=function(){
changesize();
};

//--------------------
//调整文章正文内的各个元素尺寸
//--------------------
function changesize(){
var objimg = document.getElementById("article_content").getElementsByTagName('img');
$.each(objimg , function(i, n){
if(!($(n).attr('yw')>0)){
$(n).removeAttr('width');
$(n).removeAttr('height');
$(n).attr('yw',n.width);
$(n).attr('yh',n.height);
}
DrawObj(n,vw,vh);
});

var objembed = document.getElementById("article_content").getElementsByTagName('embed');
$.each(objembed , function(i, n){
$(n).attr('yw',640);
$(n).attr('yh',360);
DrawObj(n,vw,vh);
});

}

//--------------------
// 调整某对象的最大宽度和高度
//--------------------
function DrawObj(obj,FitWidth,FitHeight){

var _width = $(obj).attr('yw');
var _height = $(obj).attr('yh');

if(_width>FitWidth){
obj.width =FitWidth;
if(_height>0){
obj.height=(_height*FitWidth)/_width;
}
}else{
obj.width=_width;
if(_height>0){
obj.height=_height;
}
}

}
也可以加上这句

$("#article_content *").css('max-width',vw);

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ios web function 浏览器手机 iframe

相关文章推荐

新的分享

章节导航