如果你的WordPress網站在iPad Pro橫屏模式下顯示為桌面版,而你希望它仍然顯示手機佈局,可以嘗試以下方法:
1. 調整Elementor的響應式設置
如果你的網站使用Elementor建構,可以按照以下步驟調整:- 進入Elementor編輯器,選擇要調整的頁面。
- 點擊“Site Settings”,選擇“Layout”選項
- 修改Breakpoints,將平板的斷點設置為1366px或更高(iPad Pro 橫屏解析度可能超過1366px,因此需要確保它適用手機佈局)。
- 調整元素樣式,確保橫屏顯示正確。
- 保存並更新頁面。
2. 使用CSS強制iPad Pro顯示手機版
你可以在 WordPress 後台 → 外觀 → 自訂 → 其他 CSS,添加以下代碼:@media (min-width: 1024px) and (max-width: 2752px) { body { zoom: 0.7; /* 調整縮放比例 */ } /* 讓 iPad Pro 橫屏模式下使用手機樣式 */ .container, .wrapper, .main-content { max-width: 600px !important; margin: 0 auto; } }作用:
- 限制iPad Pro橫屏模式(1024px – 2752px) 顯示為手機版樣式。
- 讓主要內容容器最大寬度限制為600px,模擬手機版。
- 調整zoom參數,確保縮放比例適合。
3. 強制手機版視圖(適用於某些主題)
如果你的主題支援viewport設置,可以在functions.php文件中加入這行代碼:function force_mobile_viewport() { echo '<meta name="viewport" content="width=375, user-scalable=no">'; } add_action('wp_head', 'force_mobile_viewport');作用:
- 讓網站在所有設備上強制以375px(手機版)寬度顯示,即使是iPad Pro橫屏。