Facebook 推出的Social Plugin 蠻多客戶都在使用，但隨著RWD響應式網頁(Responsive web design)的崛起，越來越多客戶反映網站嵌入的Social Plugin，不是被截掉，就是無法100%滿版，如果在手機上看的話更慘不忍睹...。
尤其是最多人使用的fb-like-box plugin，Facebook上面只能設定絕對的寬度(data-width)，如果你有嘗試設定100%，到了RWD響應式網頁上面，依然還是無法作用！下圖就是還尚未使用特殊的CSS語法來解決。
如果今天是RWD響應式網站，只要加入以下CSS語法以後，就可以輕鬆解決，讓fb-like-box Plugin的寬度達到100%，語法如下：
.fb-comments, .fb-comments iframe[style] {
width: 100% !important;
}
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
width: 100% !important;
}
接下來我們就來看看修改後的畫面
那麼...手機畫面呢？
搞定.....收工!!
歡迎瀏覽更多網站設計教學
http://www.injerry.com/blog.php?webpage=blog
英傑銳數位設計 發表在 痞客邦 留言(1) 人氣(2,432)
HTML5語法在手機版網站上撥打電話或簡訊的超鏈結
在手機版的網站上，我們常常為了要方便讓消費者可以更快速的聯絡到商家，所以我們會需要在網站上增加撥打電話、或是直接發簡訊的超鏈結，這時候，我們只要增加支持HTML5新技術、新語法就可以輕鬆搞定！使用方式如下：
1.播打電話：
<div class="telbtn" onclick="location.href='tel:021-55031903'"></div>
tel:後面的數字就是電話號碼
2.發簡訊
<div class="smsbtn" onclick="location.href='sms:13918072517'"></div>
sms:後面接手機的號碼
注意事項：必須在手機上才會有播打電話、或是簡訊的效果，PC版沒有辦法，畢竟PC不是通訊工具呀!!
英傑銳數位設計 發表在 痞客邦 留言(0) 人氣(14,574)
X-UA-Compatible設置IE兼容模式
強制瀏覽器呈現為特定的版本的標準。它不支持IE7及以下：<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7"/>
如果用分號分開，它設置為不同版本的兼容級別，IE7、IE9。它允許不同層次的向後兼容性：<meta http-equiv="X-UA-Compatible" content="IE=7; IE-9"/>
只選擇其中一個選項：<meta http-equiv="X-UA-Compatible" content="IE=9">
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
<meta http-equiv="X-UA-Compatible" content="IE=7">
<meta http-equiv="X-UA-Compatible" content="IE=5">
允許更容易的測試和維護。雖然通常比較有用的版本，這是使用模擬：<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9"/>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
什麼版本IE 就用什麼版本的標準模式：<meta http-equiv="X-UA-Compatible" content="IE=edge">
使用以下代碼強制IE 使用Chrome Frame：<meta http-equiv="X-UA-Compatible" content="chrome=1">
最佳的兼容模式方案，結合考慮以上兩種：<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
指定文件兼容性模式，在網頁中使用meta元素放入X-UA-Compatible http-equiv 標頭。以下是指定為Emulate IE7 mode兼容性之範例：
<html>
<head>
<!-- Mimic Internet Explorer 7 -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title> My Web Page </title>
</head>
<body>
</body>
</html>
設定網站服務器以指定預設兼容性模式：
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<clear />
<add name="X-UA-Compatible" value="IE=EmulateIE7" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>
資料來源：
http://ch1934.blogspot.tw/2013/06/htmlx-ua-compatibleie.html英傑銳數位設計 發表在 痞客邦 留言(0) 人氣(75,946)
何謂QR-Code?QR-Code是二維條碼的一種，1994年由日本Denso-Wave公司發明。QR來自英文「Quick Response」的縮寫，即快速反應的意思，源自發明者希望QR碼可讓其內容快速被解碼[1]。QR碼最常見於日本，並為目前日本最流行的二維空間條碼。QR碼比普通條碼可儲存更多資料，亦無需像普通條碼般在掃描時需直線對準掃描器。然而，隨著智慧型手機裝置的進步，搭配3G網路，隨時隨地都能上網，QR-Code只要一刷，就能立刻隨時知道優惠網站訊息，免除還要用打字輸入網址的麻煩。但是，我們要如何在網站內搭配PHPt程式語言，隨時隨地嵌入並製造QR-Code呢？如何在網站中安裝並呈現呢？通常有兩種做法，第一種就是在Server端安裝QR-Code產生器模組，設定好並且啟用他，然而這不是我今天要介紹這篇文章的重點，因為過程繁複，所以今天特別介紹另一種好用簡單的方法，就是使用強大的
Google API 現在有了Google Chart API你可以用一段網址就快速產生出QR-Code，以下請參考詳細設定參數及使用範例，相當簡單：Google Chart API產生QR Code格式：https://chart.googleapis.com/chart?各項參數
參數
cht=圖表格式，填qr即可
chs=條碼大小，填入wdith x height，注意寬度跟高度中間是英文字母的x
chl=條碼內要存放的資料
choe=編碼方式，建議填UTF-8
chld=容錯能力，分成L、M、Q、H四個等級
範例
我要產生一個包含linroex字串，大小是120*120的二維條碼
https://chart.googleapis.com/chart?chs=300x300&cht=qr&chl=linroex&choe=UTF-8英傑銳數位設計 發表在 痞客邦 留言(1) 人氣(3,174)
一個商業型態的網站，客戶們最需要直接與廠商的聯繫
在這個網際網路發達的時代，相信MSN即時通訊會是人人一個重要及普遍的聯繫管道
那麼，該如何在網站上加入MSN線上即時聊天的按鈕?
英傑銳數位設計 發表在 痞客邦 留言(3) 人氣(702)
在做網頁時，有時候需要製作按鈕，但是一般的按鈕實在很醜，如下圖：
圖片也是可以當作按鈕，只要將語法改變一下即可，一般要製作表單按鈕時都是使用下列語法：
英傑銳數位設計 發表在 痞客邦 留言(1) 人氣(27,833)