如何讓電子郵件在移動設備上看起來不錯？

-2

所以，我有一個時事通訊應用程序，我使用Roadie gem，這樣我就可以將內聯樣式移動到標題。但是，該電子郵件在手機上看起來並不是最棒的。如何讓電子郵件在移動設備上看起來不錯？

什麼是確保您的電子郵件模板響應的最佳方式 - 在小屏幕的移動設備上看起來不錯？

這裏是我的模板代碼：

<!DOCTYPE html> 
<html lang="en"><head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<meta name="description" content=""> 
<meta name="author" content=""> 
<title>My Title</title> 
<link href="http://fonts.googleapis.com/css?family=Oswald:400,300,700" rel="stylesheet" type="text/css"> 
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700' rel='stylesheet' type='text/css'> 
<style type="text/css"> 
    body{font-family: 'cavier', 'Source Sans Pro', sans-serif;background: #eeeeee;} 
    .container{width: 570px;margin: auto;padding: 40px 0;} 
    .main {padding: 70px 100px;font-weight: 300;background: #fff;} 
    .header{background: #cc0000;padding: 10px 0 5px 25px;min-height: 40px;} 
    .logo{float: left;} 
    .credo{color: white;font-style: italic;font-size: 12px;margin-left: 230px;margin-top: 10px;} 
    .footer {background: #7e7e7e;text-align: center;color: #fff;font-weight: 100;padding: 15px 0;} 
    .unsubscribe {text-align: center;color: #fff;font-weight: 100;padding: 15px 0;} 
    .h8{font-size: 28px; font-weight: 300;} 
    .red, .red a{color: #d93f3f;text-decoration: none;} 
    div.text{font-size: 20px;color:#616161;margin-bottom: 5px;} 
    .justify{text-align: justify;} 
    .blue, .blue a{color: #3fb2ff;} 
    .get_started{background: #66ccff;color: #fff;text-decoration: none;padding: 10px 30px;font-weight: 400;font-size: 22px;} 
    .branding {color: white; font-weight: normal;} 
</style> 
</head> 
<body> 
    <div class="container"> 
    <div class="header"> 
     <%= image_tag 'logo.png', class: 'logo' %> 
     <div class="credo">Credo here</div> 
    </div> 
    <div class="main"><%= yield %></div> 

    </div> 
</body> 
</html>

請指教。

來源

2014-11-21 Sonny Black

這裏任何幫助將是巨大的。乾杯! – 2014-11-21 23:59:27