裝置別設定沒有生效時的檢查方式 – ZenBlocks buttonBasic
結論
裝置別設定未生效，常見原因是 **CSS 快取過舊、斷點不一致、或被主題 CSS 覆寫**。
> **重點：** 先在前台檢查，再處理快取與斷點。
> **影響：** 可快速分辨是設定問題還是快取/覆寫問題。
> **調整建議：** 每次變更後立即在前台驗證，避免累積誤差。—
原因
1. CSS 快取未更新。
2. 修改斷點後未重新產生 CSS。
3. 主題 CSS 選擇器優先度較高。
4. 只在編輯器預覽檢查。
5. 裝置欄位留空，回退到桌面值。—
解決步驟
### 步驟 1：在前台檢查
1. 開啟實際前台頁面。
2. 使用 DevTools（F12）。
3. 在響應式模式切換寬度。
4. 查看 `computed styles` 確認實際套用值。### 步驟 2：清除快取
1. 檢查 `/wp-content/uploads/zenblocks/`。
2. 清除瀏覽器快取。
3. 有使用 CDN 就同步清除 CDN 快取。
4. 同時清除伺服器快取外掛。### 步驟 3：確認斷點
1. 檢查全域斷點設定。
2. ZenBlocks 預設值：
– **MD（平板）**：1024px
– **TB（小平板）**：768px
– **SP（手機）**：480px
3. 與主題斷點保持一致。
4. 確認響應式 CSS 已重新產生。### 步驟 4：確認選擇器衝突
1. 在 DevTools 檢查規則是否被劃線覆蓋。
2. 若主題 CSS 優先，需調整主題樣式。### 步驟 5：確認裝置別數值
1. 切換裝置逐項檢查。
2. 空值會回退到桌面設定。
3. 需要差異時請明確填值。—
注意事項
– 編輯器的 iframe 響應式預覽，可能與前台實際呈現不同。
– 調整斷點會影響整站，請審慎操作。—
相關設定
– [顯示設定](../button/display/)
– [字型設定](../button/font/)
– [版面配置設定](../button/layout/)