发表新帖
发表新帖

android autofit mode causing issues with css width in web page

前端 未结
关注
13 1525
挽巷
挽巷 2020-12-13 10:49

I am having problems with the auto resize feature of the android browser. The widths on my site are going a bit haywire when the device is in portrait mode.

What I w

相关标签:
13条回答
  • 轮回少年
    2020-12-13 11:15

    I set a min-width and a width on the td where my email content lives and is now working fine in Android's gmail app where versions use autofit mode.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Gmail Issue</title>
  </head>
  <body>
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
      <tr>
        <td width="50%" valign="top"></td>
        <td width="1100" valign="top" style="min-width:1100px;"></td>
        <td width="50%" valign="top"></td>
      </tr>
    </table>
  </body>
</html>
    0 讨论(0)
  • 春和景丽
    2020-12-13 11:15

    One thing is for sure, the auto-fit 'feature' is causing a lot of gray hair for developers.

    I solved the issue by inserting a transparent image, 1 pixel tall and 650 pixels wide (the width of my email) at the very top of my email.

    Even with auto-fit enabled my email now renders as it's supposed to.

    <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
  <tr>
    <td width="100%" valign="top" bgcolor="#ffffff" style="padding-top:20px">

      <!-- HERE'S THE MAGIC -->    
      <table width="650" border="0" cellpadding="0" cellspacing="0">  
        <tr>
          <td height="1">
            <img src="spacer.png" width="650" height="1" style="width:650px; height:1px;" />
          </td>
        </tr>
      </table>
      <!-- END THE MAGIC -->

      <!-- Start Wrapper-->
      <table width="650" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td >
            REST OF EMAIL HERE
          </td>
        </tr>
      </table>
      <!-- End Wrapper-->
    </td>
  </td>
</table>
    0 讨论(0)
  • 悲&欢浪女
    2020-12-13 11:18

    I simply add a transparent png image as a repeated background. This also works for H1, H2, H3... tags that seem to be plagued by the same narrow-column problem. By using a transparent png, it allows me to still assign a background color or show whatever is behind the element. This is not perfect, but it is the simplest solution I have found that does not rely on any browser-specific hack and seems to work well in all other mobile browsers I have seen.

    Although, I have noticed the same behavior on SPAN tags as well, and the above does not seem to work for this element... weird!

    0 讨论(0)
  • 南方客
    2020-12-13 11:22

    Same problem here. The content within my <p> tags is smushed to left side. No good solution found yet though I've found that if I add a background color to my <p> tag it "fixes" the issue. I'm still trying to find a real fix though since adding a background color is not ideal.

    0 讨论(0)
  • 不知归路
    2020-12-13 11:23

    I just wanted to confirm that Delbert's solution was the only thing that worked for me. It's not completely apparent as to why this works, but it works. I've done some fairly exhaustive searching on the issue, and the links from Tom's original post seems to include about all there is out there.

    For what it's worth, I tried some fairly aggressive attempts at correcting the width of some <p> tags nested deeply within a chain of <div> tags using some of the proposed solutions here:

    * { background-color: transparent; } did not work for me. However, * { background-image: url("/image/pixel.png"); DID work for me (where pixel.png is a 1x1 transparent PNG). I eventually relaxed this to apply only to my nested <p> tags, and found that my paragraphs were finally spanning the intended, correct width.

    I also confirmed that the behavior is a result of the "Auto-fit web pages" setting. I do not own an Android, but experienced these issues using the emulator.

    Thanks again to Delbert for the tip.

    0 讨论(0)
  • 再見小時候
    2020-12-13 11:24

    Yes it seems that Android 4.x is in cause. Really annoying because it is the default behaviour ! It completely destroy all my websites...

    I didn't found any solution at the moment. The proper behaviour is to fit the text with the width of your screen when you double tap the area. It seems that this feature is active even when not zoomed.

    0 讨论(0)
 看不清?
提交回复
热议问题