发表新帖
发表新帖

Issue stopping iPhone resizing HTML e-mails

后端 未结
关注
5 2147
一向
一向 2021-02-07 08:59

I\'m having an issue trying to prevent the iPhone from resizing HTML e-mails to fit the screen. It seems that code below when put into the section has no effect.

My goa

相关标签:
5条回答
  • 别那么骄傲
    2021-02-07 09:18

    I been stuck w/ this problem and there's no available solution on the net that works. Not until I realized what's causing this.

    CAUSE: This problem occurs if you have an image w/in the email. When the image auto-scale, the entire email/page will auto-fit in the window.

    SOLUTION: Add inline style for the image for min-width (300px so it doesn't take the entire 320px iphone width), max-width (your desired max with), and width of 100%.

    i.e. image src="image.jpg" style="width: 100%; min-width: 300px; max-width: 500px;"

    Worked for me, ...hoping this can help you too! ;-)

    0 讨论(0)
  • 我寻月下人不归
    2021-02-07 09:32

    To get rid of that problem you have to put the following in your CSS body tag:

        -webkit-text-size-adjust: 100%;

    This way Safari keeps the text to 100% of intended size. In case you set the value to none, the users won't be able to increase the font and this is an undesired behavior.

    This CSS property is supported and should work.

    Check the official Safari supported CSS reference:

    https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html

    Furthermore please note that the media type screen is supported in:

    • Safari 4.0 and later.
    • iOS 1.0 and later.

    I hope this helps.

    BR,
    Tolis

    0 讨论(0)
  • [愿得一人]
    2021-02-07 09:39

    A retina iPhone has a 640px width, your media query stops at 480px.

    Anyway, you can get rid of the media query altogether. The only webkit based mail client that will use this property (-webkit-text-size-adjust:none) is iPhone's and iPad's Mail app.

    Also the Mail app may also be the only client supporting CSS3

    0 讨论(0)
  • 夕颜
    2021-02-07 09:41

    The iPhone seems to be a pain when it comes to resizing things, especially when you switch the orientation of the phone. Have you tried adding the meta tag with viewport settings in it?

    <meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1, user-scalable=no"/>

    It does prevent them from zooming, but I haven't found any better way to stop the iPhone from zooming on orientation change. I'm not sure if this will help in this situation, but just a suggestion to try out.

    0 讨论(0)
  • 南方客
    2021-02-07 09:43

    What you are doing is correct but the problem is that rather than using -webkit-text-size-adjust:none; inside a style tag, you should use it in the below manner:

    <body style="-webkit-text-size-adjust:none;">

    This means you should use this as an inline css property.

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