页面元素自适应

2013/11/25 问题一箩筐

在html5下使得页面自适应,以满足不同浏览器下的大小适应的问题。

1、对文本的处理增加的内容
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;' name='viewport' />
<meta http-equiv='pragma' content='no-cache' />
<meta http-equiv='cache-control' content='no-cache' />
<meta http-equiv='expires' content='0' />

主要部分已使用红色标注

2、对图片的处理

在页面中增加样式控制

<style type='text/css'>
     img { width: 100%; }
</style>
3、不使用绝对宽度

由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。 具体说,CSS代码不能指定像素宽度:

width:xxx px;

只能指定百分比宽度:

width: xx%;

或者

width:auto;

  我所使用的将页面所有图片自适应的方法。要求:小于屏幕宽度的图片正常大小,大于屏幕宽度的图片按照屏幕宽度展示。目前已测试过ie9,chrom,android浏览器和ipad浏览器。

<SCRIPT LANGUAGE="JavaScript">
<!--
	function initPage(){
		 var objs = document.getElementsByTagName('img');
		 var clientWid = document.documentElement.clientWidth;
            for(var i=0;i<objs.length;i++)  
            {  
			   if(objs[i].width > clientWid){
				 objs[i].style.width = '100%';
			   }
            } 
	}
//-->
</SCRIPT>

 使用该方法的弊端,需要图片都加载完之后,才能处理。当页面比较大时,速度会比较慢。

Search

    欢迎关注我的微信公众号

    Yannis的程序人生

    Table of Contents