HTML电子邮件签名以针对iPhone /小屏幕调整大小

debugcn 发表于 Dev

保罗·奥谢

我正在设计一个基本的HTML签名。我在Dreamweaver（Mac）中执行HTML代码，在firefox / safari中打开以进行预览，然后选择所有内容并将HTML拖放到苹果邮件签名编辑器中。它运作良好，并且签名在台式机和ipad上看起来不错，但在iphone /较小的屏幕上不起作用。

签名看起来像这样（我已经涂黑了个人详细信息）：

问题出在较小的iPhone上，有些文本留在图片的左侧，有些不适合并最终留在图片下方，但有空白。理想的情况是，如果在iphone上可以进行配置，以使所有文本和图标始终显示在主图片下方，并且没有空白。是否可以为HTML电子邮件中的iPhone设置不同的CSS样式集？还是有其他方法可以使我的代码更具响应性？

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>


</head>
<body>

 <div id="sig-container" style="margin-top: 15px;padding-top: 6px; border-top: 1px dashed #ddd;">
 <div style="float: left; margin: 2px 10px 5px 0px; border-right: 2px solid #000; padding-right: 30px; display: block;" id="photoWrapper"> <img src="http://websiteremoved/emailsm.jpg" id="sigPhoto" height="300px" width="200px"> </div> 
 <div style="margin-top:0px; margin-left: 74px;" id="sigDetailsWrapper"> <p style="font-family: Arial, sans-serif; font-size: 20px; line-height: 10px; color: #333; margin-top:10; margin-left:0; padding-left:0;"> <strong><span id="sigName">Name Removed</span></strong></span> <br>
 <span id="sigTitle"><p style="font-family: Arial, sans-serif; font-size: 16px; line-height: 0px; color: #333; margin-top:0; margin-bottom:20px;margin-left:0; padding-left:0;">Title Removed | Title Removed</span><br> 
 <div><p style="font-family: Arial, sans-serif; font-size: 16px; line-height: 20px; color: #333;">
 <span> email: <a href="mailto:emailremoved" id="sigEmail" style="color:#428BCA; text-decoration: none;">emailremoved </a></span> <br>
  <span> mobile: <a href="tel:mobileremoved" id="sigMobile" style="color:#428BCA; text-decoration: none;">mobileremoved </a></span><br>
  <span> web:  <a href="http://websiteremoved" id="sigWebsite" style="color:#428BCA; text-decoration: none;"   rel="nofollow">websiteremoved</a></span> <br>
 <span>  facebook: <a href="http://facebook.com/facebookremoved" id="sigfb" style="color:#428BCA; text-decoration: none;"  rel="nofollow">facebook.com/facebookremoved</a></span> <br> <br>
  <a href="tel:phonenumberremoved"><img src="http://websiteremoved/phone.jpg" height="62px" width="62px" style="color:#428BCA; text-decoration: none;"  rel="nofollow"></a>
  <a href="http://websiteremoved/fb.jpg" height="62px" width="62px" style="color:#428BCA; text-decoration: none;"  rel="nofollow"></a>
  <a href="mailto:emailremoved"><img src="http://websiteremoved/email.jpg" height="62px" width="62px" style="color:#428BCA; text-decoration: none;"  rel="nofollow"></a>
  <a href="http://websiteremoved"><img src="http://websiteremoved/web.jpg" height="62px" width="62px" style="color:#428BCA; text-decoration: none;"  rel="nofollow"></a>  </p> </div>  

<div class="sep about" style="box-sizing: border-box;
background-attachment: scroll; height: 120px; position: relative; 
-webkit-background-size: cover; background-size: cover; 
background-image: 
url('http://websiteremoved/about-sep.jpg');
 z-index: 1; background-position: 50% -48.5px; background-repeat: 
no-repeat no-repeat; "></div>

</div>

</body>
</html>

杰夫·菲利普斯

是的，您可以使用视网膜屏幕来定位iPhone。媒体查询应为“ @media all and（min-device-pixel-ratio：1.5）”，例如...

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
@media all and (min-device-pixel-ratio : 1.5) { 
    #sigDetailsWrapper {margin-left: 0px !important;}
}
</style>
</head>
<body>

 <div id="sig-container" style="margin-top: 15px;padding-top: 6px; border-top: 1px dashed #ddd;">
 <div style="float: left; margin: 2px 10px 5px 0px; border-right: 2px solid #000; padding-right: 30px; display: block;" id="photoWrapper"> <img src="http://websiteremoved/emailsm.jpg" id="sigPhoto" height="300px" width="200px"> </div> 
 <div style="margin-top:0px; margin-left: 74px;" id="sigDetailsWrapper"> <p style="font-family: Arial, sans-serif; font-size: 20px; line-height: 10px; color: #333; margin-top:10; margin-left:0; padding-left:0;"> <strong><span id="sigName">Name Removed</span></strong></span> <br>
 <span id="sigTitle"><p style="font-family: Arial, sans-serif; font-size: 16px; line-height: 0px; color: #333; margin-top:0; margin-bottom:20px;margin-left:0; padding-left:0;">Title Removed | Title Removed</span><br> 
 <div><p style="font-family: Arial, sans-serif; font-size: 16px; line-height: 20px; color: #333;">
 <span> email: <a href="mailto:emailremoved" id="sigEmail" style="color:#428BCA; text-decoration: none;">emailremoved </a></span> <br>
  <span> mobile: <a href="tel:mobileremoved" id="sigMobile" style="color:#428BCA; text-decoration: none;">mobileremoved </a></span><br>
  <span> web:  <a href="http://websiteremoved" id="sigWebsite" style="color:#428BCA; text-decoration: none;"   rel="nofollow">websiteremoved</a></span> <br>
 <span>  facebook: <a href="http://facebook.com/facebookremoved" id="sigfb" style="color:#428BCA; text-decoration: none;"  rel="nofollow">facebook.com/facebookremoved</a></span> <br> <br>
  <a href="tel:phonenumberremoved"><img src="http://websiteremoved/phone.jpg" height="62px" width="62px" style="color:#428BCA; text-decoration: none;"  rel="nofollow"></a>
  <a href="http://websiteremoved/fb.jpg" height="62px" width="62px" style="color:#428BCA; text-decoration: none;"  rel="nofollow"></a>
  <a href="mailto:emailremoved"><img src="http://websiteremoved/email.jpg" height="62px" width="62px" style="color:#428BCA; text-decoration: none;"  rel="nofollow"></a>
  <a href="http://websiteremoved"><img src="http://websiteremoved/web.jpg" height="62px" width="62px" style="color:#428BCA; text-decoration: none;"  rel="nofollow"></a>  </p> </div>  

<div class="sep about" style="box-sizing: border-box;
background-attachment: scroll; height: 120px; position: relative; 
-webkit-background-size: cover; background-size: cover; 
background-image: 
url('http://websiteremoved/about-sep.jpg');
 z-index: 1; background-position: 50% -48.5px; background-repeat: 
no-repeat no-repeat; "></div>

</div>

</body>
</html>

但是，您可能需要重新编码以使用表，因为div和Floats经常会在Outlook中混乱。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-06-14

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章

HTML电子邮件签名以针对iPhone /小屏幕调整大小

HTML电子邮件签名以针对iPhone /小屏幕调整大小

如何减小Photoshop渲染的HTML电子邮件签名的大小？

HTML电子邮件大小调整-Android

Outlook 2010正在调整HTML电子邮件的大小，但没有图像的大小

约束未针对所有屏幕设备正确调整大小

使用Google Inbox编码html电子邮件（自动调整大小）

HTML电子邮件签名

调整屏幕大小时，HTML导航栏下拉框内容无法正确调整大小

HTML电子邮件：图像可在表格中自行调整

如何禁用HTML电子邮件以暗模式进行调整？

iPhone-调整图像大小和两个标签以适合屏幕大小

HTML电子邮件签名显示问题

Android：小屏幕自动调整大小视图

电子邮件签名

这是针对不同屏幕尺寸调整文本大小（在 TextView 中）的最佳做法

如何针对不同的屏幕尺寸动态调整文字大小和边距？

在CakePHP中获取电子邮件大小

可以在电子邮件模板中使用邮箱大小调整

HTML / CSS定位〜屏幕尺寸/分辨率和浏览器大小调整

每行6张图像，无论屏幕尺寸如何调整图像大小-HTML CSS3

html页面中的样式元素根据屏幕大小动态调整

为什么Outlook 2007会调整外发和传入HTML电子邮件中的图像大小？我怎样才能解决这个问题？

调整PyGame屏幕的大小

调整VirtualBox屏幕的大小？

在VBA中更改HTML电子邮件正文的字体类型和大小

无论图像大小如何如何在HTML电子邮件中使图像响应

如何在电子邮件html中内联显示各种大小的文本

在VBA中更改HTML电子邮件正文的字体类型和大小

在HTML表格中将两个不同大小的图像并排对齐以发送电子邮件

HTML电子邮件签名列向右浮动