問題描述

我正在使用自己的 WP 主題構建我的第一個響應式 WP 站點。主要模板是部分流體，部分固定。這使我只能創建 3 個”versions”，一個桌面，平板電腦和移動版本。所有更改均由於媒體查詢而發生。 (桌面尺寸為 768 至 1200 像素，平板電腦為 530 到 767，移動設備為 300 到 529)

主頁 (擁有自己的模板) 將顯示幻燈片。幻燈片聲稱響應 (我還沒有設置)，我預計它通過平板電腦的大小。但是當我到達移動大小時，我只想要一張靜態照片。

我不想僅僅使用”display:none” 進行幻燈片放映，因為它仍然會佔用手機的空間/電力。我想保留所有的版本在相同的模板，所以我想我將需要一些 php 或 javascript 來實現這一點。 (除非有其他方式，我會很高興聽到！)

任何人都可以幫助代碼嗎？我在 CSS 中有一個幻燈片 div：

#slideshow {
height: 296px;
margin: 20px 20px 10px 20px;
padding: 0;
background-color: #f00;
}/*by not setting a width the sshow box fills the space minus the margins*/

並且在模板中，幻燈片短代碼或模板代碼將在打開和關閉幻燈片 div 標籤之間。但是我也想在那裏放置一個照片到手機版。所以我想我需要一些 「如果 529px 或更多，獲得幻燈片; 如果少，得到照片」 對嗎？我不是 php 或 javascript 程序員，我很好的剪切和粘貼！

該網站在 http://66.147.244.110/~rdbikeco/可以看到 – 我們現在正在添加頁面內容的階段，博客需要注意，側邊欄需要工作等。但是，shell 頁面正在加載，內容正在加載。

幫助非常感謝！

最佳解決方案

不要使用服務器端瀏覽器嗅探。它會失敗：

The question here is how can you reliably detect mobile browsers in order to redirect them? The fact is: you can』t. Most people attempt to do this with browser sniffing—checking the User Agent string that the browser sends to the server with every request. However, these are easily spoofed in browsers, so they can』t be relied upon, and they don』t tell the truth, anyways. 「Browser sniffing」 has a justifiably bad reputation, so is often renamed 「device detection」 these days, but it』s the same flawed concept.

$is_iphone 變量 @kaiser 推薦是有缺陷的 (對不起，凱撒，希望你不介意:)) 。

讓瀏覽器決定，使用真正可用的空間。首先在文檔頭中添加一個 meta 元素，以確保可見寬度與設備寬度匹配：

<head>
    <!-- other stuff -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,target-densitydpi=device-dpi">
</head>

然後設置滑塊內容的目標：

<div id="dynamicimgaes">
    <img id="slideshow" src="path/to/default/image" alt="" />
</div>

在 JavaScript 中，現在可以使用設備寬度來決定是否顯示滑塊。

這是一個 jQuery 示例 (未經測試，隨時可以編輯，直到它工作)：

<script type='text/javascript'>
if ( 480 < jQuery( window ).width() )
{
    jQuery(document).ready( function()
    {
        jQuery.get(
            'http://path/to/slider/content',
            function( data )
            {
                jQuery( "#slideshow" ).replaceWith( data );
            }
        );
    });
}
</script>

參考文獻

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。