DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> JS制作手機端自適應縮放顯示
JS制作手機端自適應縮放顯示
編輯:JavaScript綜合知識     

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

示例一:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <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>

示例二:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></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>

示例三:

1 2 3 4 5 <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) 除了布局和文本,"自適應網頁設計"還必須實現圖片的自動縮放。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved