{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 劫难 的问题《Issue stopping iPhone resizing HTML e-mails》','https://www.manongdao.com/q-497507.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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 goal is just to stop the font re-sizing. I've tried other variations using -webkit-text-size-adjust:none; inline and in other way, all without success.
Would grealty appreciate any advice or an alternative solution.
@media screen and (max-device-width: 480px){
/*fixes too big font in mobile Safari*/ html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 { -webkit-text-size-adjust:none; } } </style>
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! ;-)
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:This means you should use this as an inline css property.
To get rid of that problem you have to put the following in your CSS body tag:
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:
I hope this helps.
BR,
Tolis
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
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?
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.