html 为 iphone/smaller 屏幕调整大小的电子邮件签名
html email signature to resize for iphone/smaller screenn
我正在设计一个基本的 HTML 签名。我在 Dreamweaver (Mac) 中编写 HTML 代码，在 firefox/safari 和 select 中打开预览，然后将 HTML 拖到 apple mails signature composer 中。它运行良好，签名在桌面和 ipad 上看起来不错，但在 iphone/smaller 屏幕上不起作用。
签名看起来像这样（我把个人信息涂黑了）：
问题出在较小的 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>
不过，您可能需要重新编码以使用表格，因为 Outlook 中的 div 和浮点数经常会弄乱。
我正在设计一个基本的 HTML 签名。我在 Dreamweaver (Mac) 中编写 HTML 代码，在 firefox/safari 和 select 中打开预览，然后将 HTML 拖到 apple mails signature composer 中。它运行良好，签名在桌面和 ipad 上看起来不错，但在 iphone/smaller 屏幕上不起作用。
签名看起来像这样（我把个人信息涂黑了）：
问题出在较小的 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>
不过，您可能需要重新编码以使用表格，因为 Outlook 中的 div 和浮点数经常会弄乱。