允許網頁寬度自動調整的"自適應網頁設計"到底是怎么做到的?下面我們就來通過示例來探討下。

JS制作手機端自適應縮放顯示

示例一：

1. <script> 
2. var _width = parseInt(window.screen.width); 
3. var scale = _width/640; 
4. var ua = navigator.userAgent.toLowerCase(); 
5. var result = /android (/d+/./d+)/.exec(ua); 
6. if (result){ 
7. var version = parseFloat(result[1]); 
8. if(version>2.3){ 
9. document.write('<meta name="viewport" content="width=640, minimum-scale = '+scale+', maximum-scale = '+scale+', target-densitydpi=device-dpi">'); 
10. }else{ 
11. document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">'); 
12. } 
13. } else { 
14. document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">'); 
15. } 
16. </script> 

示例二：

1. <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
2. <script type="text/javascript"> 
3. $(function(){ 
4. if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) { 
5. var viewportmeta = document.querySelector('meta[name="viewport"]'); 
6. if (viewportmeta) { 
7. viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0'; 
8. document.addEventListener('touchstart', function () { 
9. viewportmeta.content = 'viewportmeta.content = width=device-width, minimum-scale=0.25, maximum-scale=1.6'; 
10. }, false); 
11. document.addEventListener('orientationchange', function () { 
12. viewportmeta.content = 'viewportmeta.content = width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0'; 
13. }, false); 
14. } 
15. } 
16. }); 
17. </script> 

示例三：

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

總結：

一.其實并不難。 首先，在網頁代碼的頭部，加入一行viewport元標簽。

二. 不使用絕對寬度 由于網頁會根據屏幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。

三. 相對大小的字體 字體也不能使用絕對大小(px)，而只能使用相對大小(em)。

四. 流動布局(fluid grid) "流動布局"的含義是，各個區塊的位置都是浮動的，不是固定不變的。

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

五. 圖片的自適應(fluid image) 除了布局和文本，"自適應網頁設計"還必須實現圖片的自動縮放。

以上所述就是本文的全部內容了，希望大家能夠喜歡。