對於PC版大尺吋的螢幕，當網站要 feed 資料到 facebook 時，可以使用 javascript SDK 的
FB.ui => method:'feed' 方式處理，參考位置。此方法會popup小視窗讓user可以分享資料出去。

但是遇到手機版網頁就有點麻煩，實測上手機版的 chrome 會出現轉不停的情況，無法分享；而iPhone則是另開新頁面處理，可以成功但是會多一個分頁。所以手機版網頁建議使用 redirect 方式處理分享機制，參考位置
​

    var fbUrl = "https://www.facebook.com/dialog/feed?" +

    "app_id=122465741241119&display=touch" +

    "&link=" + encodeURIComponent("http://www.shopunt.com/tch/FixPage.aspx?id=525") +

    "&picture=" + encodeURIComponent("http://www.shopunt.com/tch/event/2014-nail-enrollment/fb_200x200.jpg") +

    "&description=" + encodeURIComponent("市價不斐的光療DIY教學，UNT傾囊相授！10場巡迴免費教學，讓妳輕鬆掌握光療DIY訣竅，並搶先體驗秋冬最新流行色！現場打卡，再送時尚美甲工具組") +

    "&redirect_uri=" + encodeURIComponent("http://www.shopunt.com/tch/event/2014-nail-enrollment/Handler.ashx?fun=FBCallback");

​

當然以 redirect 處理與 javascript 方式處理是兩種不同的方式，redirect 方式的 callback 網址 (redirect_uri)要接收facebook 導回的 post_id , javascript 方式則是 callback function 處理 post_id

使用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

一般在製作手機版或是自適應性網站時會加一個meta tag: <meta name="viewport" content="width=device-width,initial-scale=1.0">
但是這樣在IOS系統時，字體的大小會隨著螢幕轉向(螢幕解析度改變)而變大或縮小



解決辦法： 在css的body中加入"-webkit-text-size-adjust:100%;"

自從網站上了 net4.0 之後，網站會有為數不少的 "潛在危險" 的 exception
大都來自不友善的攻擊，想要測試網站的漏洞
網站做這層防護是好事，只是這個東西太敏感了，連簡單的冒號 & 符號都會跳 exception
更慘的是 Google Analytics 會在一些 user cookies 寫入xml文字 ( __utmz=... )
導致正常的 User 都不能正常瀏覽我們網站

解法有兩種:
1. 直接在 web.config 直接設定 不檢查

<system.web>

    <httpRuntime requestValidationMode="2.0" />

    <pages validateRequest="false" />

</system.web>

2. 自訂 RequestValidate (4.0以上才可以用)
請參考此文章 http://msdn.microsoft.com/en-us/library/system.web.util.requestvalidator(v=vs.100).aspx

後者比較算是正解 基本上處理掉 <script 我想 XSS 就解決一大半
 

一般在崁入youtube影片時，影片的寬高是固定的

隨著螢幕大小自動調整寬高的方式：


CSS：
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


HTML：
<div class="video-container">
    <iframe src="http://www.youtube.com/embed/dFVxGRekRSg" frameborder="0" width="560" height="315"></iframe>
</div>

calc()是CSS3的一個計算長度單位的新功能，能使用數學四則運算方式。

1. 使用“+”“-”“*”“/”四則運算；

2. 可以使用百分比、px、em、rem等單位；

3. 可以混合使用各種單位進行計算。

例：
.thing {
  width: 90%; /* fallback if needed */
  width: calc(100% - 10px);
  width: calc((100% - 12px) / 2);
  width: calc(100%/3 - 2*1em - 2*1px);
}

4. 使用時，"+" & "-" 兩邊需加空格(一定要加)， "*" & "/"兩邊是不用加空格(要加也是可以)

5. 瀏覽器的支援：IE9+ , Firefox4.0+ , Chrome , Safari , iOS Safari6.0+ , Android Browser 4.4+
   寫法： width: -moz-calc((100% - 12px) / 2);
              width: -webkit-calc((100% - 12px) / 2);
              width: calc((100% - 12px) / 2);
 

 .mobile-share_fb{ display:block; background:url("http://www.shopunt.com/css/mobile/images/mobile-s9398562778.png") no-repeat; background-position: 0 -1648px; height: 80px; width: 80px;} 

 .shrink-attr{ background-size: 152px 2104px; width: 40px; height: 40px; background-position: 0 -824px;} 

 .fb-test{ display:block; background:url("http://www.shopunt.com/images/logo_welcome.jpg") no-repeat; background-size:50% 50%; width: 105px; height: 105px;} 

 

這個活動頁左邊 menu 要固定位置 但是不能跑出框框外面
http://www.shopunt.com/tch/event/2014-naked-truth-cc-cream/

所以需要處理scroll物件

<div id="menuContainer">

  <div id="menu">

    <ul>

      <li>menu1</li>

      <li>menu2</li>

    </ul>

  </div>

  <div> ...長內容.... </div>

</div>

js

        var __ContainerHeight = 5000;

        var __ContainerTop = 160;

        var __MenuHeight = 550;

        var __FixedTop = 20;



        $(window).load(function () {



            __ContainerHeight = $("#menuContainer").height();

            __ContainerTop = $("#menuContainer").offset().top;

            __MenuHeight = $("#menu").height();



            $("#menu").css({ "top": __FixedTop + "px", "position": "absolute" });

            $(window).scroll(function () {

                var scrolls = $(this).scrollTop();

                //console.log(scrolls);

                if (scrolls < __ContainerTop) {

                    $("#menu").css({ "top": __FixedTop + "px", "position": "absolute" });

                }

                else if ((scrolls + __MenuHeight + __FixedTop) > (__ContainerHeight + __ContainerTop)) {

                    $("#menu").css({ "top": (__ContainerHeight - __MenuHeight) + "px", "position": "absolute" });

                }

                else {

                    $("#menu").css({ "top": __FixedTop + "px", "position": "fixed" });

                }

            });



        });

 

這是一篇加密文章，需輸入密碼才可閱讀