網(wǎng)頁為什么要做自適應(yīng)交付，皆因現(xiàn)在移動設(shè)備大行其道，現(xiàn)在是移動互聯(lián)網(wǎng)時代，以IOS及Android為首的各種移動終端已經(jīng)遍地開花。

當(dāng)人家用380px的iphone打開你的網(wǎng)頁時，你總不能顯示個1024px的頁面給人家，用戶體驗大打折購，因為響應(yīng)式設(shè)計或者自適應(yīng)交付就應(yīng)運而生。

之前已經(jīng)提到過響應(yīng)式設(shè)計(responsive design)，但響應(yīng)式設(shè)計有個重點就是不管3721，全部資源（html,css,js）統(tǒng)統(tǒng)加載下來，頁面比較冗腫；而響應(yīng)式的交付，完美的響應(yīng)式交付是服務(wù)器跟據(jù)訪問者的設(shè)備終端，動態(tài)交付相應(yīng)html、css、js資源，全部是實實在在的東西，沒有多余的代碼或者資源。經(jīng)測試ASP.NET MVC 4及往后版本可以輕松實現(xiàn)此功能，模版頁面命名方式加多個.mobile就可以，當(dāng)然服務(wù)端動態(tài)response.write也可以動態(tài)拼了頁面，但工作量大啊！后端人家也不肯……。

無奈，項目緊迫，說服ＰＭ用的目前比較流行的偽響應(yīng)式交付的方式，用頁面的重定向（redirect） 與頁面cookie控制相結(jié)合

需求：

一、設(shè)計２套模版，一個是平板電腦/桌面端 模板（www.yoursite.com），另一個是手機(jī)端(www.yoursite.com/mobile 作為子站) 模板，關(guān)鍵是設(shè)好手機(jī)版的Viewport的寬度如下，因為所有的移動終端會根據(jù)你的viewport來自適應(yīng)顯示。

<meta name="viewport" content="width=400">

　　

二、響應(yīng)式交付

full site頁面頂部加入如下JS代碼

var useragent = window.navigator.userAgent.toLowerCase();
var currenturl = window.location.href.toLowerCase();    
var targetSite = getCookie('targetSite');if (targetSite == '' || targetSite == null || targetSite == 'mobile')
{if(useragent.indexOf('ipad') == -1 && useragent.indexOf('mobile') != -1){{var newUrl = currenturl.toLowerCase().replace('www.yoursite.com', 'www.yoursite.com/mobile');setCookie('targetSite', 'mobile','/');        if (currenturl.indexOf('/mobile/') == -1) {window.location.href = newUrl;}}      }
}
/*****
cookies*****/
function setCookie(name, value, path) {var date = new Date();date.setTime(date.getTime() + 0.5 * 24 * 3600 * 1000);//cookie lasts half of a day.var p = "";if (path) {p = ";path=" + path;}document.cookie = name + "=" + escape(value) + ";expires=" + date.toGMTString() + p;
}function getCookie(name)
{var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));if (arr != null)return unescape(arr[2]);return null;
}
function delCookie(name)
{var exp = new Date();exp.setTime(exp.getTime() - 1);var cval = getCookie(name);if (cval != null)document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
}

在mobile site，相應(yīng)要有選擇跳到full site的鏈接，那要加上cookie控制

function redirectFullUrl() {var currenturl = window.location.href.toLowerCase();delCookie("targetSite");setCookie("targetSite", "full", "/");var newUrl = currenturl.toLowerCase().replace('www.yoursite.com/mobile', 'www.yoursite.com');window.location.href = newUrl;
}

這樣就ＯＫ啦，原理比較簡單，主要通過控制cookie來引導(dǎo)，當(dāng)然你full site與mobile site的頁面所有相應(yīng)要嚴(yán)格對得上

轉(zhuǎn)載于:https://www.cnblogs.com/fastmover/p/3868735.html

總結(jié)

以上是生活随笔為你收集整理的项目新的需求，网页的自适应交付/响应式交付 Responsive/Adaptive Delivery的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。