在网站建设过程中，制作的网站如果做到在电脑上正常显示，同时允许网页宽度自动调整的"自适应网页设计"到底是怎么做到的？下面我们就来通过示例来探讨下。

示例一：

<script> 
var _width = parseInt(window.screen.width); 
var scale = _width/640; 
var ua = navigator.userAgent.toLowerCase(); 
var result = /android (\d+\.\d+)/.exec(ua); 
if (result){ 
var version = parseFloat(result[1]); 
if(version>2.3){ 
document.write('<meta name="viewport" content="width=640, minimum-scale = '+scale+', maximum-scale = '+scale+', target-densitydpi=device-dpi">');
 }else{ 
document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">'); 
} 
} else { 
document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">'); 
} 
</script>

示例二：

<script type="text/javascript"> 
$(function(){ 
 if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) { 
  var viewportmeta = document.querySelector('meta[name="viewport"]'); 
   if (viewportmeta) { 
    viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0'; 
  document.addEventListener('touchstart', function () {
    viewportmeta.content = 'viewportmeta.content = width=device-width, minimum-scale=0.25, maximum-scale=1.6';   }, false); 
   document.addEventListener('orientationchange', function () { 
   viewportmeta.content = 'viewportmeta.content = width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0'; 
  }, false); 
   } 
  }
 }); 
</script>

示例三：

<meta charset="UTF-8"> 
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> 
<meta content="yes" name="apple-mobile-web-app-capable"> 
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">

总结：

一.其实并不难。 首先，在网页代码的头部，加入一行viewport元标签。

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

二. 不使用绝对宽度 由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。

三. 相对大小的字体 字体也不能使用绝对大小（px），而只能使用相对大小（em）。

四. 流动布局（fluid grid） "流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。 　

.main { float: right; width: 70%; } .leftBar { float: left; width: 25%; }

五. 图片的自适应（fluid image） 除了布局和文本，"自适应网页设计"还必须实现图片的自动缩放。