如何根據設備顯示/隱藏內容

我正在尋找一種基於客戶打開電子郵件的設備顯示/隱藏電子郵件通訊的內容的方法。如何根據設備顯示/隱藏內容

我目前有此代碼段中頭部分：

@media only screen and (max-width: 480px) { 
    #mobile { display: block; } /* show it on small screens */ 
#normal { display: none; } /* hide it elsewhere */ 
} 

@media only screen and (min-width: 481px) { 
    #mobile { display: none; } /* hide it elsewhere */ 
    #normal { display: block; } /* show it on large screens */ 
}

隨着：

<div id="mobile">content</div> or <div id="normal">content1<div>

，如果我使用它的網絡也能正常工作，我可以擴展我的瀏覽器窗口和內容根據窗口寬度顯示/消失，但只要我通過電子郵件系統發送測試，它就可以在移動設備上正常工作，但在桌面設備（Gmail）上會出現故障。

而且，因爲這是一封電子郵件，我無法使用JavaScript，因此它都需要爲html/css。

任何我做錯了或失蹤？

來源

2013-02-21 jamesdonn

值得注意的是，許多電子郵件客戶端都具有非常原始的HTML和CSS支持，因此在某些客戶端上實際上可能無法實現。對不起，我不能幫助更多。 – surfitscrollit 2013-02-21 15:33:29

這裏有一些關於Gmail支持哪些標準的信息：http://www.email-standards.org/clients/gmail/和http://www.campaignmonitor.com/css/ – surfitscrollit 2013-02-21 15:34:09

我感到你的痛苦。在html電子郵件新聞稿中顯示和隱藏內容讓我久久不知所措！

/* Hide on Desktop */ 

.hide-desktop { 
    /* non-gmail */ 
    display: none; 

    /* gmail */ 
    font-size: 0; 
    max-height: 0; 
    line-height: 0; 

    /* outlook */ 
    mso-hide: all; 

    /* optional, required only if you're using padding */ 
    padding: 0; 

} 
@media (max-width: 480px) { 
    .hide-desktop { 
     display: block !important; 
     font-size: 12px !important; 
     max-height: none !important; 
     line-height: 1.5 !important; 
    } 
} 


/* Hide on Mobile */ 

@media (max-width: 480px) { 
    .hide-mobile { 
     display: none; 
     max-height: 0; 
    } 
}

注意：不要忘記內聯.hide-desktop規則，那就是媒體查詢之外。

因此，使用媒體查詢和一些黑客行爲，我們可以爲桌面做一個看漲的隱藏，然後撤消媒體查詢。相反，由於移動客戶端對媒體查詢有不錯的支持，我們可以單獨使用媒體查詢來隱藏移動內容。離羣值，gmail，只是獲得桌面視圖 - 這是不幸的，但仍然可用。

來源

2015-03-26 22:18:15 jon

如何根據設備顯示/隱藏內容

回答

相關問題