您的位置: 首页  >  技术问答  >  HTML电子邮件签名调整为iPhone /小屏幕

HTML电子邮件签名调整为iPhone /小屏幕

分类: 技术问答 • 2022-09-17 22:56:12
问题描述：

我正在设计一个基本的HTML签名。我在Dreamweaver（Mac）中执行HTML代码，在firefox/safari中打开并预览，然后选择全部并将HTML拖入Apple邮件签名编辑器。它运行良好，在桌面和ipad上签名看起来不错，但是它不适用于iphone /小屏幕。HTML电子邮件签名调整为iPhone /小屏幕

签名看起来像这样（我涂黑的个人资料）： enter image description here

的问题是在较小的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所有和（分设备像素比：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>

你可能要重新编码此使用的表，但是，作为申报单往往能在Outlook中以及Floats中搞砸了。

相关推荐