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

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

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

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

需求：

一、設(shè)計(jì)２套模版，一個(gè)是平板電腦/桌面端 模板（www.yoursite.com），另一個(gè)是手機(jī)端(www.yoursite.com/mobile 作為子站) 模板，關(guān)鍵是設(shè)好手機(jī)版的Viewport的寬度如下，因?yàn)樗械囊苿?dòng)終端會(huì)根據(jù)你的viewport來(lái)自適應(yīng)顯示。

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

　　

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

full site頁(yè)面頂部加入如下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;
}

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

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

總結(jié)

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

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