Css HTML电子邮件中div的100%宽度样式不适用于iPhone
我一整天都在想这个问题。我一直在绞尽脑汁，还是想不出来。我正在写一封HTML电子邮件：Css HTML电子邮件中div的100%宽度样式不适用于iPhone,css,iphone,django,html,Css,Iphone,Django,Html,我一整天都在想这个问题。我一直在绞尽脑汁，还是想不出来。我正在写一封HTML电子邮件： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width, user-scalable=false" /> </head> <style
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=false" />
</head>
<style media="screen" type="text/css">
#headerbar {width:100%;background-color:#7FCBD8;text-align:center;color:#FFFFFF;}
#greeting {width:500px;margin:20px auto;text-align:left;padding:0 0.5em;font-size:1.4em;}
#bodytext {width:500px;margin:0px auto;text-align:left;padding:0 0.5em;font-size:1.2em}
body {margin:0;padding:0;font-family:Helvetica Neue;}
</style>
<style media="screen and (max-device-width:640px)">
#greeting {width:400px;font-size:1.2em;}
</style>
<body>
<center>
<div id="headerbar">
NewsLetter
</div>
<div id="greeting">
Hello <span style="color: #7FCBD8"><b>@{{ user.username }}</b></span>,
</div>
<div id="bodytext">
<p>
We would like to update you with news around the community.
</p>
</div>
</center>
</body>
</html>
#标题栏{宽度：100%；背景色：#7FCBD8；文本对齐：居中；颜色：#FFFFFF；}
#问候语{宽度：500px；边距：20px自动；文本对齐：左侧；填充：0.5em；字体大小：1.4em；}
#正文{宽度：500px；边距：0px自动；文本对齐：左侧；填充：0.5em；字体大小：1.2em}
正文{margin:0；padding:0；字体系列：Helvetica Neue；}
#问候语{宽度：400px；字体大小：1.2em；}
新闻稿
您好{{user.username}}，
我们想向您介绍社区的最新消息。
在所有桌面浏览器上，一切似乎都运行良好。Firefox和Chrome没有任何问题。但在iPhone上的原生邮件应用程序中，内容并非100%全宽。右手边好像有一块空白！如何解决这个问题？右侧不是空白，但您的计算使边界超出了iPhone屏幕（320像素宽）。我的建议是，在指定宽度时，不要使用静态测量值，也要考虑填充和边距值
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=false" />
</head>
<style media="screen" type="text/css">
#headerbar {width:100%;background-color:#7FCBD8;text-align:center;color:#FFFFFF;}
#greeting {text-align:left;padding:0px;font-size:1.4em;}
#bodytext {margin:20px;text-align:left;padding:0 0.5em;font-size:1.2em}
body {margin:0;padding:0;font-family:Helvetica Neue;}
</style>
<style media="screen and (max-device-width:640px)">
#greeting {width:100%;font-size:1.2em;}
</style>
<body>
<center>
<div id="headerbar">
NewsLetter
</div>
<div id="greeting">
Hello <span style="color: #7FCBD8"><b>@{{ user.username }}</b></span>,
</div>
<div id="bodytext">
<p>
We would like to update you with news around the community.
</p>
</div>
</center>
</body>
</html>
#标题栏{宽度：100%；背景色：#7FCBD8；文本对齐：居中；颜色：#FFFFFF；}
#问候语{文本对齐：左；填充：0px；字体大小：1.4em；}
#正文{边距：20px；文本对齐：左；填充：0.5em；字体大小：1.2em}
正文{margin:0；padding:0；字体系列：Helvetica Neue；}
#问候语{宽度：100%；字体大小：1.2em；}
新闻稿
您好{{user.username}}，
我们想向您介绍社区的最新消息。