Почему вложенные таблицы изменяют масштаб страницы на мобильном телефоне? - PullRequest
Новая
       6

Почему вложенные таблицы изменяют масштаб страницы на мобильном телефоне?

0 голосов
/ 18 февраля 2020

Я пытаюсь создать HTML электронное письмо (знаю, знаю) с вложенными таблицами. Я включил <meta name="viewport" content="width=device-width, initial-scale=1">, чтобы установить соответствующую ширину страницы и начальное масштабирование на мобильном телефоне. Прежде чем добавить свою вложенную таблицу, все выглядит правильно, но после того, как таблица вложена, при просмотре на мобильном устройстве происходит две вещи, которые я не понимаю: 1) вся страница масштабируется до размера рабочего стола и 2) содержимое вложенная таблица меньше, чем содержимое остальной части страницы. Может кто-нибудь объяснить, почему это происходит, и что я могу сделать, чтобы избежать этого?

До добавления вложенной таблицы (выглядит правильно): 

<!doctype html>
<html>
    <head>
        <title>Test</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body style="background: #F0F2F2 url(https://thomasprintworks.com/temp/dynamic-letter1/light-gray-geometric-pattern.png);">
        <center>
            <table style="background: #FFFFFF; max-width: 800px; border: 1px solid #DDD" cellpadding="0" cellspacing="0">
                <tr>
                    <td width="60" valign="top"><img src="https://thomasprintworks.com/temp/dynamic-letter1/clear.gif" width="60"></td> <!-- spacer column -->

                    <td width="680">
                        <p style="font-family:Helvetica, Arial, sans-serif; color: #414141; font-size: 16px; line-height: 1.5; margin-top: 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis. Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
                    </td>

                    <td width="60" valign="top"><img src="https://thomasprintworks.com/temp/dynamic-letter1/clear.gif" width="60"></td> <!-- spacer column -->
                </tr>

                <tr> <!-- spacer row -->
                    <td><img src="https://thomasprintworks.com/temp/dynamic-letter1/clear.gif" width="30"></td>
                </tr>

                <tr>
                    <td bgcolor="#DDD" colspan="3">
                        <p style="font-family:Helvetica, Arial, sans-serif; color: #414141; font-size: 10px; line-height: 1.5; text-align: center;">Problems viewing this email? <a style="color:#13AAD9" href="#">View in browser</a></p>
                    </td>
                </tr>
            </table> <!-- end container table -->
            <br><br>
        </center>
    </body>
</html>

После добавления вложенной таблицы ( сломан): 

<!doctype html>
<html>
    <head>
        <title>Test</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body style="background: #F0F2F2 url(https://thomasprintworks.com/temp/dynamic-letter1/light-gray-geometric-pattern.png);">
        <center>
            <table style="background: #FFFFFF; max-width: 800px; border: 1px solid #DDD" cellpadding="0" cellspacing="0">   <tr>
                <td width="60" valign="top"><img src="https://thomasprintworks.com/temp/dynamic-letter1/clear.gif" width="60"></td> <!-- spacer column -->

                <td>
                    <table style="width: 680px;" cellpadding="0" cellspacing="0"> <!-- START nested table -->
                        <tr>
                            <td width="250">
                                <p style="font-family:Helvetica, Arial, sans-serif; color: #414141; font-size: 16px; line-height: 1.5; margin-top: 0;">Foo</p>
                            </td>

                            <td width="250">
                                <p style="font-family:Helvetica, Arial, sans-serif; color: #414141; font-size: 16px; line-height: 1.5; margin-top: 0;">Bar</p>
                            </td>
                        </tr>
                    </table> <!-- END nested table -->
                </td>

                <td width="60" valign="top"><img src="https://thomasprintworks.com/temp/dynamic-letter1/clear.gif" width="60"></td> <!-- spacer column -->
            </tr>   

            <tr>
                <td width="60" valign="top"><img src="https://thomasprintworks.com/temp/dynamic-letter1/clear.gif" width="60"></td> <!-- spacer column -->

                <td width="680">
                    <p style="font-family:Helvetica, Arial, sans-serif; color: #414141; font-size: 16px; line-height: 1.5; margin-top: 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis. Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
                </td>

                <td width="60" valign="top"><img src="https://thomasprintworks.com/temp/dynamic-letter1/clear.gif" width="60"></td> <!-- spacer column -->
            </tr>

            <tr> <!-- spacer row -->
                <td><img src="https://thomasprintworks.com/temp/dynamic-letter1/clear.gif" width="30"></td>
            </tr>

            <tr>
                <td bgcolor="#DDD" colspan="3">
                    <p style="font-family:Helvetica, Arial, sans-serif; color: #414141; font-size: 10px; line-height: 1.5; text-align: center;">Problems viewing this email? <a style="color:#13AAD9" href="#">View in browser</a></p>
                </td>
            </tr>
        </table> <!-- end container table -->
        <br><br>
        </center>
    </body>
</html>
...