快捷導(dǎo)航

JS制作手機端自適應(yīng)縮放顯示

更新時間：2015年06月11日 11:51:06 投稿：hebedich

允許網(wǎng)頁寬度自動調(diào)整的"自適應(yīng)網(wǎng)頁設(shè)計"到底是怎么做到的？下面我們就來通過示例來探討下。

示例一：

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

總結(jié)：

一.其實并不難。首先，在網(wǎng)頁代碼的頭部，加入一行viewport元標(biāo)簽。

二. 不使用絕對寬度由于網(wǎng)頁會根據(jù)屏幕寬度調(diào)整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。

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

四. 流動布局（fluid grid） "流動布局"的含義是，各個區(qū)塊的位置都是浮動的，不是固定不變的。　
.main { float: right; width: 70%; } .leftBar { float: left; width: 25%; }

五. 圖片的自適應(yīng)（fluid image）除了布局和文本，"自適應(yīng)網(wǎng)頁設(shè)計"還必須實現(xiàn)圖片的自動縮放。

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

您可能感興趣的文章:

相關(guān)文章

微信公眾號獲取用戶地理位置并列出附近的門店的示例代碼
這篇文章主要介紹了微信公眾號獲取用戶地理位置并列出附近的門店的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-07-07
詳解小程序如何動態(tài)綁定點擊的執(zhí)行方法
這篇文章主要介紹了詳解小程序如何動態(tài)綁定點擊的執(zhí)行方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
用JS寫的一個TableView控件代碼
JS寫的一個TableView控件代碼，方便輸出表格。
2010-01-01
詳解JavaScript中Arguments對象用途
本文主要介紹了詳解JavaScript中Arguments對象用途，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
JavaScript引用賦值與傳值賦值總結(jié)
這篇文章主要介紹了JavaScript引用賦值與傳值賦值總結(jié)，在JavaScript中基本數(shù)據(jù)類型都是傳值賦值，復(fù)合數(shù)據(jù)類型都是引用賦值(傳地址)也叫引用傳址，下文更多相關(guān)資料，需要的小伙伴可以參考一下
2022-05-05
Javascript從數(shù)組中隨機取出不同元素的兩種方法
這篇文章給大家分享了兩種Javascript從數(shù)組中隨機取出不同元素的方法，大家可以都學(xué)習(xí)學(xué)習(xí)，這樣更能有助于大家的學(xué)習(xí)和理解，下面來一起看看吧
2016-09-09
JS去除空格和換行的正則表達(dá)式(推薦)
下面小編就為大家?guī)硪黄狫S去除空格和換行的正則表達(dá)式(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
javascript寫的異步加載js文件函數(shù)(支持?jǐn)?shù)組傳參)
這篇文章主要介紹了javascript寫的異步加載js文件函數(shù),同時支持單個文件和多個文件(數(shù)組傳參),但不兼容IE6,需要的朋友可以參考下
2014-06-06
Js實現(xiàn)手機發(fā)送驗證碼時按鈕延遲操作
在做項目的時候，經(jīng)常遇到發(fā)短信驗證碼的問題，這時候需要用戶點完發(fā)送驗證碼按鈕后，一段時間內(nèi)不能重復(fù)點擊，畢竟驗證碼都是收費的嘛，誰都不想浪費，那么如何實現(xiàn)這種功能呢？下面來分享一下。
2014-06-06
如何在微信小程序中使用骨架屏的步驟
這篇文章主要介紹了如何在微信小程序中使用骨架屏的步驟,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-06-06