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

最新推荐文章于 2022-11-11 14:23:23 发布

lancerevo8

最新推荐文章于 2022-11-11 14:23:23 发布

阅读量1.5k

点赞数

分类专栏： iphone Javascript Andrio 文章标签： ios web function 浏览器手机 iframe

Javascript 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

Andrio

1 篇文章 0 订阅

订阅专栏

iphone

0 篇文章 0 订阅

订阅专栏

设计一个专门为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>

</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.οnresize=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.οnresize=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);

lancerevo8

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ios web App 使正文中的图片、视频根据屏幕尺寸自适应

设计一个专门为android或iphone优化的网页通常会将页面与手机浏览器设置成1:1大小(禁止手册浏览器缩放).这时候每个手机的屏幕尺寸都不一致(包括横屏竖屏)，例如当你浏览一篇文章时，正文的文字可以根据手机屏幕的尺寸自动换行，但图片、视频、iframe等这些对象不能够自适应屏幕。现在需要获得到手机屏幕的物理尺寸，例如屏幕的寛是230*480那么正文中的图片最大宽度就为
复制链接

扫一扫