页面元素自适应

在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>

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

赏

谢谢你请我喝杯咖啡

支付宝

微信