WordPress 在手機檢視下怎麼突然變寬？

開發再增加了 Facebook Like Plugin 之後，WordPress 在手機檢視下變得更寬，怎麼回事？ 答案當然是 Facebook Like 的外掛參數設定。但到底是那裡出錯呢？
其實就是在這裡的設定：

<div class="fb-like" 
data-action="like" 
data-href="http://www.your-domain.com/your-page.html" 
data-layout="standard" data-show-faces="true">
</div>

這裡的 data-layout="standard" 讓這個 facebook 外掛在手機模式的頁面"太寬"。 檢視臉書的說明網頁[1]就知道，standard 適用於寬屏，若畫面小於 450 則必須選擇其他的 layout 參數。

版面	預設尺寸
standard	寬度下限：225 像素。 預設寬度：450 像素。 高度：不含相片為 35 像素；含相片為 80 像素。
box_count	寬度下限：55 像素。 預設寬度：55 像素。 高度：65 像素。
button_count	寬度下限：90 像素。 預設寬度：90 像素。 高度：20 像素。
button	寬度下限：47 像素。 預設寬度：47 像素。 高度：20 像素。

 

參考資料

[1] https://developers.facebook.com/docs/plugins/like-button