Question

我一整天都试图解决这个问题。一直在破坏我的头脑仍然无法弄明白。我正在写一封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 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>

所有桌面浏览器似乎都能正常运行。 Firefox＆amp; Chrome没有任何问题。但在iPhone上的本机Mail应用程序中，内容不是100％全宽。右侧似乎有一个空白区域！我该如何解决这个问题？

Answer 1

右侧不是空白区域，但是您的计算使边界延伸到iPhone屏幕（320px宽度）之外。我的建议是不要使用静态测量值，也不要在分配宽度时考虑填充和边距值。

<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>

我改变的值可能会影响您的设计，但是开始解决问题是一个很好的点。

HTML电子邮件中div的100％宽度样式不适用于iPhone

1 个答案: