iPhone上的媒體查詢郵件

我正在嘗試使用媒體查詢的iPhone通訊，但我甚至沒有設法做一個非常基本的例子工作。有人可以幫助我理解爲什麼下面例子中的跨度顏色在iPhone上仍然是藍色的？我嘗試刪除元標記視口，我甚至刪除了跨度上的內聯樣式，但仍然不會變綠。iPhone上的媒體查詢郵件

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
<style type="text/css"> 

.test{ 
    color: #FF0000; 
} 

@media only screen and (max-device-width: 480px) { 
    .test{ 
     color: #00FF00 !important; 
    } 
} 
</style> 
    </head> 
    <body> 
    <table class="w600 l-content-table" border="0" cellpadding="0" cellspacing="0" width="600" style="letter-spacing: -0.01em; border-collapse: collapse; font-family: arial; text-align: left; margin: 0px; padding: 0px; border: 0px;"> 
      <tbody style="margin: 0px; padding: 0px; border: 0px;"> 
       <tr> 
        <td class="w600" height="55" width="600" style="color: #6f6f6f; border: #6f6f6f;"> 
         <span class='test' style='color: #0000FF'>Test</span> 
        </td> 
       </tr> 
      </tbody> 
     </table> 
    </body> 
</html>

我看到有一個very similar topic這一個，但它沒有得到答案，我的問題是多一點點基礎。

我測試這個發送電子郵件在IE8

來源

2013-06-19 Fabbio

打開HTML其實，有相當多的通過蘋果的開發者門戶（無需註冊）可用文檔。爲了您的具體問題，這的ressource應該做的伎倆：

https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/OptimizingforSafarioniPhone/OptimizingforSafarioniPhone.html

這也是一個很好的切入點，以瞭解更多有關Web應用程序在iOS上，從技術的東西到用戶界面指導原則

這就是說，你應該重新排序你的CSS，以便@media查詢是CSS的最後一部分（因爲它需要覆蓋以前的CSS定義，如果它們是按照你的方式排序的話就不能這樣做）。

來源

2013-06-19 08:07:28 Jan

謝謝，你是對的，我必須重新排序CSS。它仍然不起作用。文字仍然是藍色的。我也檢查你寄給我的珍貴鏈接，但沒有發現與這個問題有特別關係的任何東西。有任何進一步的建議？ – Fabbio

嘗試使用此媒體查詢：'@media唯一屏幕和（max-width：480px），僅屏幕和（max-device-width：480px）{...} – Jan

iPhone上的媒體查詢郵件

回答

相關問題