JS製作手機端自適應縮放顯示_javascript技巧-js教程-PHP中文網

JS製作手機端自適應縮放顯示_javascript技巧

WBOY

發布： 2016-05-16 15:55:43

原創

1253 人瀏覽過

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

範例一：

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

登入後複製

範例三：

<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元標籤。

二. 不使用絕對寬度由於網頁會依照螢幕寬度調整佈局，所以不能使用絕對寬度的佈局，也不能使用具有絕對寬度的元素。

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

四. 流動佈局（fluid grid） "流動佈局"的意思是，各個區塊的位置都是浮動的，不是固定不變的。　
.main { float: right; width: 70%; } .leftBar { float: left; width: 25%; }

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

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