使用CSS Media Query可以實現響應式網頁設計（Responsive Web Design）
但是在眾多瀏覽器中唯有IE這個萬惡瀏覽器到 IE9 及之後的版本才支援 CSS Media Query，不過有辦法可以讓 IE6 到 IE8 支援 Media Query 語法，那就是 Respond.js。

要注意的地方是：respond.js要放在css下面(順序有關係)
例：

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

<script type="text/javascript" src="js/respond.min.js"></script>

Demo

下載地址：Respond.js
 

1. 名詞解釋

DPI - dots per inch (每英寸點密度)
PPI - pixels per inch (每英寸像素密度)

簡單來說，DPI是邏輯解析度，PPI是實體解析度(各家手機的螢幕解析度)

以圖像顯示或字型來說：MAC螢幕預設常用DPI為72、windows系統則是96或120；印刷用的DPI常用為300


2. Device Pixel Ratio(裝置像素比)

以 iPhone 為例
http://www.paintcodeapp.com/news/iphone-6-screens-demystified

視網膜解析度與css背景圖
http://weedygarden.net/2010/10/retina-display-and-css-background-images/

字型光柵化
http://zh.wikipedia.org/wiki/%E5%AD%97%E4%BD%93%E5%85%89%E6%A0%85%E5%8C%96

以下網站可測試此螢幕的裝置像素比
http://www.devicepixelratio.com/


3. 利用css media query 針對不同像素比顯示不同的排版

測試該瀏覽器能使用media query的功能語法
http://cssmediaqueries.com/overview.html

​

有的時候jquery會用到取代標籤的方式
<div id="testId">我是原本文字</div>

以下兩個都是innerHTML

document.getElementById('testId').innerHTML = "我是之後文字";

$('#testId').html("我是之後文字");

以下兩個都是outerHTML

document.getElementById('testId').outerHTML = "<div id="我是原本Id">我是原本文字</div>";

$('#testId').replaceWith("<div id="我是原本Id">我是原本文字</div>");

但是有時候～我們並不是要取代～而是想單純得到html含標籤的內容～

$('#testId').clone().wrap('<div>').parent().html()

 

作global結帳時發生IE8不能選信用卡到期日，
因為 IE8 只吃 evt.cancelBubble = true 才不會把click事件往上層傳
所以以下是終極不會有問題的寫法

                if (evt.stopPropagation) { evt.stopPropagation() }

                if (evt.preventDefault) { evt.preventDefault() }

                try { evt.cancelBubble = true } catch (e) { }

                try { evt.returnValue = false } catch (e) { }

evt就是傳進來的event

(補充一下) 這個適合用 window.addEventListener 方式綁事件才需使用，如果用jQuery綁事件直接return false;就有一樣的效果


範例:

       // 經由bike提示，發現這範例不好 jQuery 可以直接 return false;

       $("#gc-exp-month-select a").click(function (evt) {

            $("#gc-exp-month").val($(this).text());

            $("#span-gc-exp-month").text($(this).text());

            $(this).parent().hide();

            if (evt.stopPropagation) { evt.stopPropagation() }

            if (evt.preventDefault) { evt.preventDefault() }

            try { evt.cancelBubble = true } catch (e) { }

            try { evt.returnValue = false } catch (e) { }

           // 在 jQuery 裡上面四行 可以用一行 return false; 就可

        });

 

修改QC檢查站,新增效期檢查功能,因需要在動態產生的產品品項加上效期檢查鈕,每次動態產生的項目都要為按鈕元素綁定
觸發ajax檢查效期事件,原先的作法是每次動態產生的同時,為該元素綁定一次事件,品項有幾項就要做相同的綁定次數,後來在網路上看到另外一種寫法,利用DOM事件會由子元素一路向父元素Bubble Up的特性,在document或特定元素統一掛上事件函數，事件被觸發時再透過選擇器比對事件目標元素是否吻合，決定要不要執行事件邏輯，藉此提升效率，同時還能將"未來才會產生的元素"也納入事件的涵蓋範圍,以下是範例:

$(document).ready(function () {

            //原先的寫法:

           $("td").bind("click", function(){

　　　　 $(this).toggleClass("click");

　　 });

//事件委託:

​$("table").delegate("td","click", function(){

　　　　 $(this).toggleClass("click");

　　 });

    })

在這邊利用事件冒泡的特性,藉由頁面載入完成的同時對父元素作事件委託處理,接下來不管產生幾個動態元素,都可以透過事件監聽判斷該函式是否該執行,原先如果動態產生一百個品項就要綁定一百次的事件,只要頁面載入完成後一次就完成,達到有效率的寫法!!

假如你現在在ASP.NET 4.0 的環境下的話，就算進行上述的設定，可能仍會出現驗證失敗的訊息(潛在危險Request.QueryString的錯誤訊息)
因為ASP.NET4.0與2.0版本在請求驗證的定義上已經有所不同：

這時為了避免這樣的問題，一樣在Web.Config中 <system.web>下加入下列語句
<httpRuntime requestValidationMode="2.0" />

http://www.dotblogs.com.tw/pin0513/archive/2010/10/22/18522.aspx

var test=["a","b","c"];
var arrClone=[];
$.extend(true,arrClone,test);
test[0]="3";
console.log(test); //["3","b","c"];
console.log(arrClone); //["a","b","c"];

有時候會用html去取代物件裡的內容，但是當取代的文字過長的時候，很可能會沒有錯誤訊息，但是卻又無法正常顯示，尤其是IE8

var str = "過長的文字";

$(".asdasd").html();

此時我們最好使用以下的方式

var str = "過長的文字";

document.getElementById('Create_Menu').innerHTML = str;

就可以正常執行了

相關參考

http://localhost:2874/WWW20/scripts/Merge/Create_Menu.js

darren 補充:
調整一下標題，讓他較符合發文內容

最近為了在 iframe 中的 history.goback 的問題，把後台的 jquery 升級到 1.10.1 版，結果發生讓 checkbox 全選的語法無效，原來是 attr('checked') 在 1.10.1 版中不會隨著 checkbox 是否選取而改變。

<input type="checkbox" onclick="if ($(this).attr('checked')) { $('.cbProducts').attr('checked', true) } else { $('.cbProducts').attr('checked', false) }" />

要換成

<input type="checkbox" onclick="if ($(this).prop('checked')) { $('.cbProducts').prop('checked', true) } else { $('.cbProducts').prop('checked', false) }" />

不過很麻煩節是，若是 jquery 1.5.x 及以前的版本是不支援 prop 的，請參考文章:
http://blog.xuite.net/vexed/tech/44905647-jQuery+1.6+.attr()+%E5%92%8C+.prop()

我先把後台的 MasterPageWithForm.master 由 1.10.1 改回 1.6.2 版, MasterPage.master 和 MasterPage_NoMenu.master 兩支程式的 jquery 由 1.5.1 改到 1.6.2 版。未來要升級 1.10.1 以上的版本時可能會需要大工程把 attr 改為 prop。 或是考慮用 

$.fn.attr = $.fn.prop;

來把整個 attr 改為 prop

 

若是用 Chrome 開了一個 fancybox ，在 iframe 中的網頁執行了 history.back 會把 fancybox 關掉而不是回到上一頁，這會造成 UW.WU.ShowMessageAndBack 等等利用 history.back 的 function 無法使用。
 
在多次測試後，很神奇的發現，若是在 iframe 中再進入第二頁，第二頁就可以用 history.back 了。

所以寫了一個 UW.WU.DelayRedirect()，若是某個頁面是要在 fancybox 的 iframe 中執行，就在 PageLoad 加一個

If UW.WU.GetValueFromQueryStringOrForm("Action").ToLower = "delayredirect" Then

            UW.WU.DelayRedirect()

End If

在 a 的 href 中多加一個 Action=DelayRedirect，預設就會在 500 ms 之後重新載入這個頁面 (新網址是 UW.WU.UrlWithNewTFWithoutAction)。