Fatal编程技术网
  • iphone/
  • HTML/CSS时事通讯，@media query不调整iPhone上的文本大小

HTML/CSS时事通讯，@media query不调整iPhone上的文本大小

iphone html css

HTML/CSS时事通讯，@media query不调整iPhone上的文本大小,iphone,html,css,media,Iphone,Html,Css,Media,无论出于何种原因，我的文本大小调整在iPhone上不起作用，在android上也不起作用，在另一种电子邮件格式中也不起作用。似乎看不到这两个文件之间的任何差异。图像也会调整大小，似乎只是文本的问题 <head> /*Outlook链接修复程序*/ #outlook a{填充：0；} /*Hotmail背景和行高修复*/ .ExternalClass{宽度：100%！重要；} .ExternalClass、.ExternalClass p、.ExternalClass sp

无论出于何种原因，我的文本大小调整在iPhone上不起作用，在android上也不起作用，在另一种电子邮件格式中也不起作用。似乎看不到这两个文件之间的任何差异。图像也会调整大小，似乎只是文本的问题

<head>





/*Outlook链接修复程序*/
#outlook a{填充：0；}
/*Hotmail背景和行高修复*/
.ExternalClass{宽度：100%！重要；}
.ExternalClass、.ExternalClass p、.ExternalClass span、.ExternalClass字体、，
.ExternalClass td、.ExternalClass div{行高：100%；}
/*图像边框和格式*/
img{大纲：无；文本装饰：无；-ms插值模式：双三次；}
img{border:none；}
/*重新设计iPhone自动链接（如电话号码）*/
.applelinks a{color:#2222222；文本装饰：无；}
/*移动设备的Hotmail符号修复*/
.ExternalClass img[class^=Emoji]{宽度：10px！重要；高度：10px！重要；显示：inline！重要；}
/*移动媒体查询*/
@媒体屏幕和（最大宽度：480px）{
/*这会将表格和图像的大小调整为100%宽，并具有相应的宽度*/
表[class=emailwrapto100pc]，img[class=emailwrapto100pc]{宽度：100%！重要；高度：自动！重要；}
/*在手机上隐藏东西*/
表[class=emailnomob]，td[class=emailnomob]，img[class=emailnomob]，span[class=emailnomob]{显示：无！重要；}
td[class=emailcolsplit]{宽度：100%！重要；浮点：左！重要；}
[class=emailmobbutton]{显示：块！重要；字体大小：14px！重要；字体重量：粗体！重要；填充：6px 4px 8px 4px！重要；行高：18px！重要；背景：ddddddd！重要；边距：10px自动；宽度：100%；文本对齐：中心；颜色：111！重要；文本装饰：无；文本阴影：fff 1px 0；}
/*这将调整手机正文文本的大小*/
span[class=emailbodytext]，a[class=emailbodytext]{字体大小：16px！重要；行高：21px！重要；}
}
@媒体屏幕和屏幕（最小宽度：1024px）{
[class=emailmobbutton]{显示：无！重要；}
span[class=emailmobbutton]{显示：无！重要；}
}
任何帮助都将不胜感激。

我遇到了一个问题，当时我正在与电子邮件提供商合作，不允许在电子邮件中进行修改
部分，还有我的一个 
@media…
代码不起作用

对于电子邮件，我们必须及时回顾，而不是向前看。尝试将媒体查询作为单独的块部分写入。我尝试过这种方法&它在Android上运行得很顺利，之前的方法失败了

`<style type="text/css">
/* standard styles */
</style>
<style media="screen and (max-width: 480px)">
/* responsive styles */
</style>`

`
/*标准样式*/
/*反应型风格*/
`
希望这对您有所帮助。

您是否在页眉上添加了视口元数据？把这个添加到你的css链接中：media=“screen”charset=“utf-8”/>是的，还有我的css链接，我想它不能显示在代码块中。将立即尝试media screen您在不同的设备上使用什么电子邮件客户端？安卓和iPhone上的本机，在以前的电子邮件布局中没有此问题。至少在我看来，一切都是一样的。 
                    <table style="padding-top:20px;" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td>
                            <a href="" target="_blank">
                            <img height="216" width="216" border="0" src="" style="display: block;" class="emailwrapto100pc" />
                            </a>
                        </td>
                    </tr>
                    <tr>    
                        <td align="center" style="padding-top:10px;padding-left:10px;padding-right:10px;">
                            <a href="" style="text-decoration: none; color: #111111">               
                            <span class="emailbodytext" style="font-size:12px; font-family:tahoma, sans-serif; line-height:20px; color:#333333;">Hugo Boss Black</span>
                        </a>
                        </td>
                    </tr>
                    <tr>
                        <td width="33%" align="center" style="padding-top:5px;padding-bottom:10px;padding-left:10px;padding-right:10px;">
                            <a href="" style="text-decoration: none; color: #111111">
                            <span class="emailbodytext" style="font-size:12px; font-family:tahoma, sans-serif; line-height:20px; color:#333333;">Bugnara Polo T-Shirt</span>
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td align="center" width="33%">
                        <a style="text-decoration:none;background-color:#000000; color:#ffffff; padding:5px 20px; font-family:tahoma, sans-serif;font-size:12px;line-height:20px;" href="">
                            SHOP NOW</a>
                        </td>
                    </tr>
                </table>

`<style type="text/css">
/* standard styles */
</style>
<style media="screen and (max-width: 480px)">
/* responsive styles */
</style>`