如何解决从浏览器到桌面邮件应用程序的差异视图
我有一个关于桌面邮件应用程序的问题。当我过去在浏览器上查看电子邮件时，一切看起来都不错，而且应该是这样，当我查看桌面应用程序时，就没有那么多了。我想知道我怎么能对两者有相同的看法。
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<Meta name="viewport" content="width=device-width,initial-scale=1.0" />
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> -->
<style>
* {
-webkit-Box-sizing: border-Box;
-moz-Box-sizing: border-Box;
Box-sizing: border-Box;
}
a.view-mail {
margin-bottom: 10px;
width: 100%;
float: left;
text-align: center;
font-size: 11px;
}
</style>
</head>
<body style="width: 100%; float: left; margin: 0; position: relative">
<div class="mail-Box" style="width: 100%; float: left">
<div class="mail-content" style="width: 100%; float: left">
<div
class="content"
style="
max-width: 520px;
float: none;
margin: 0 auto;
padding: 20px 10px;
"
>
@if($data['campaign_header_url'])
<!--modified here-->
<div
class="Box-img"
style="float: left; height: auto; display: block; width: 100%"
>
<img
style="float: left; height: auto; display: block; width: 100%"
src="https://frankfurt.apollo.olxcdn.com/v1/files/zg3o01bm5bcc-RO/image;s=1000x700"
alt=""
/>
</div>
@endif
<h2
class="title"
style="
font-size: 24px;
width: 100%;
float: left;
height: 35px;
font-style: normal;
font-weight: bold;
line-height: 28px;
color: #5e5d5d;
margin: 30px 0 15px 15px;
font-family: 'Roboto',Arial,sans-serif;
"
>
Message title
</h2>
@if(!is_null($data['header_image']) &&
array_key_exists('preview',$data['header_image']))
<!--modified here-->
<div
class="Box-img"
style="
margin: 10px 0 10px 0;
float: left;
height: auto;
display: block;
width: 100%;
"
>
<img
style="
margin: 10px 0 10px 0;
float: left;
height: auto;
display: block;
width: 100%;
"
src="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/dog_cool_summer_slideshow/1800x1200_dog_cool_summer_other.jpg"
alt=""
/>
</div>
@endif
<!--modified here-->
<div
style="
width: 100%;
float: left;
margin: 15px 0px 30px 5px;
font-family: 'Roboto',sans-serif;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 20px;
text-align: left;
color: #5e5d5d;
"
>
Your questios goes here
</div>
<!--modified here all the <a> tag styles-->
<ul
class="buttons"
style="
list-style: none;
padding: 6px 10px 6px 20px;
position: relative;
right: 10px;
"
>
<li>
<a
style="
margin-left: 0px !important;
padding-left: 20px;
border: none;
width: 100%;
text-align: left;
font-size: 13px;
cursor: pointer !important;
background: #ebebeb;
line-height: 25px;
height: 60.2px;
display: flex;
align-items: center;
float: left;
color: #5e5d5d;
text-decoration: none;
margin-bottom: 20px;
font-style: normal;
font-family: 'Roboto',sans-serif;
"
class="btn btn-click"
href="{{ $data['answer_one_url'] }}"
>Answer 1</a
>
</li>
<li>
<a
style="
margin-left: 0px !important;
padding-left: 20px;
border: none;
width: 100%;
text-align: left;
font-size: 13px;
cursor: pointer !important;
background: #ebebeb;
line-height: 25px;
height: 60.2px;
display: flex;
align-items: center;
float: left;
color: #5e5d5d;
text-decoration: none;
margin-bottom: 20px;
font-style: normal;
font-family: 'Roboto',sans-serif;
"
class="btn btn-click"
href="{{ $data['answer_two_url'] }}"
>Answer 2</a
>
</li>
<li>
<a
style="
margin-left: 0px !important;
padding-left: 20px;
border: none;
width: 100%;
text-align: left;
font-size: 13px;
cursor: pointer !important;
background: #ebebeb;
line-height: 25px;
height: 60.2px;
display: flex;
align-items: center;
float: left;
color: #5e5d5d;
text-decoration: none;
margin-bottom: 20px;
font-style: normal;
font-family: 'Roboto',sans-serif;
"
class="btn btn-click mb-0"
href="{{ $data['answer_three_url'] }}"
>Answer 3</a
>
</li>
</ul>
<div
class="footer"
style="
width: 100%;
border-top: 1px solid #232323;
margin-top: 50px;
padding: 30px 15px;
background: none;
text-align: center;
float: left;
color: #5e5d5d;
font-size: 14px;
font-style: normal;
font-family: 'Roboto',sans-serif;
color: #5e5d5d;
"
>
@if($data['footer_text'])
<p>Footer text here</p>
@endif
<div>
<a
href="https://www.linkedin.com/company/digiscope-eu/?viewAsMember=true"
>
<img
src="https://digiscope.eu/wp-content/uploads/2021/02/linkedin4.png"/
style=" font-size: 15px; text-align: center;
text-decoration:none; margin: 5px 2px; border-radius: 50%;
margin:10px 0px 10px 10px; display:inline-block"></a
>
<a href="https://twitter.com/digiscope_eu">
<img
src="https://digiscope.eu/wp-content/uploads/2021/02/Frame-1.png"
style="
font-size: 15px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
margin: 10px 0px 10px 10px;
display: inline-block;
"
/></a>
</div>
<!--modified here (combined two <p> tags,they had the same style; added a break and reduced margin-bottom to 10px)-->
<p
style="
margin-bottom: 10px;
float: left;
text-align: center;
width: 100%;
font-family: 'Roboto',sans-serif;
font-style: normal;
font-weight: none;
font-size: 13px;
line-height: 15px;
text-align: center;
color: #5e5d5d;
"
>
$data['translations']['mail_sent_to'] }} {{
$data['destination_email'] }} {{
$data['translations']['during_the_campaign'] }} {{
$data['campaign_title'] }}.<br />
{{$data['translations']['your_responses_anonymous'] }}.
</p>
<!--modified here font-size from 13 to 12 and reduced margin to 10px-->
<p
style="
margin: 10px;
font-size: 13px;
float: left;
text-align: center;
width: 100%;
font-family: 'Roboto',sans-serif;
font-style: normal;
font-weight: none;
font-size: 12px;
line-height: 15px;
text-align: center;
color: #5e5d5d;
"
class="unsubscribe"
>
{{ $data['translations']['unsubscribe'] }}
<a href="{{ $data['unsubscribe_link'] }}"
>{{ $data['translations']['here'] }}</a
>.
</p>
</div>
</div>
</div>
</div>
</body>
</html>这就是它在桌面应用程序上的样子。 enter image description here
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
