I'm working on a responsive email template for my employer. For the desktop size, I was able to leave the default font size at 16px and just use rem to adjust sizes as necessary. It looks fine on the desktop, in Gmail, and is fully responsive. However, when viewed in Mail on iPhone, the font is SO SMALL. I had to add a media query that increases the base font size to 26px to get reasonable font sizes in the email. I've tried doing some research, but it doesn't seem as if other people have had to do the same. There is very little CSS in the code, but here is what I have:
body, table, td, a, p, span {-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
#media screen and (max-width: 600px) {
html, td {
font-size: 26px !important;
line-height: 1.3;
}
}
I also have
<meta name="viewport" content="width=device-width, initial-scale=1">
There is some other CSS having to do with resizing images, with margins, etc. but that is the only CSS dealing with font-sizes (all the rem info is inline so it isn't stripped out by Bronto/Gmail). If I resize it in the browser to a mobile size, the text looks massive, but when viewed on my iPhone, it looks great. I'm concerned that this may be an iPhone quirk though and that it will look massive on other types of devices. Does anyone have any insight?
Here is some code from the templates I use (where I don't see this issue):
Try making your <meta> tags look more like this:
<meta name="x-apple-disable-message-reformatting">
<meta name="viewport" content="width=device-width">
The first tag disables auto-scale in iOS 10 Mail, which could be affecting your text size. The second tag sets the viewport; forcing initial-scale shouldn't be necessary and could be throwing off your design.
Also try moving the inline body styles from the <body> tag to inside a universal selector in <style>, like so:
<style>
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
</style>
<body width="100%" bgcolor="#ffffff" style="margin: 0; mso-line-height-rule: exactly;">
Have you heard of the viewport meta tag? You should consider adding this tag to the meta on your site. Just be cautious though as it could manipulate other HTML elements you have already configured.
<meta name="viewport" content="width=device-width, initial-scale=1">
Here is a link to a page explaining what it does in further detail.
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
Okay, finally figured it out. Luckily I had been going through and making all our email templates responsive, and one of them didn't have a hero image. Guess what? The font size looked massive on mobile for the imageless-template! So after some experimentation, I found that
img {
width: 100% !important;
}
completely resolved the issue, so that now the actual font-size matches what is set in the CSS. Despite all the width:100% styles set on the image itself and on its parent containers, somehow the image must have been too large and triggered a resize of all content, I guess? If anyone has an explanation I'd love to hear it.
FWIW, I think you are complicating your life trying to use the text-size-adjust property.
According to the browser compatibility chart on this MDN document, there is poor browser support and it's buggy.
Secondly, the way I read this W3C doc I don't think you are using it for its intended purpose. W3C states that:
This module contains features of CSS relating to one possible
mechanism for adapting pages designed for desktop computer displays
for display on smaller screens such as those of mobile phones...
Its purpose is to provide a solution for pages which were designed for desktop display only.
As you know, older web pages which don't use the viewport meta tag will be scaled down to fit the viewport of a mobile device. The problem with this is that text often becomes too small to read and this text-size-adjust property proposes to remedy this by enlarging text on mobile devices.
I think if you continue to use the viewport meta tag, make your template responsive, and size elements so that they display well in all devices you would get good results if you don't use text-size-adjust, i.e. some like the following:
body, table, td, a, p, span {font-size:16px;}
Good sources of info about text-size-adjust:
https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust?v=control
https://drafts.csswg.org/css-size-adjust/#text-size-adjust
https://caniuse.com/#search=font-size-adjust
When HTML5 pages load in Safari mobile, there is a split-second flash of white before the content displays. Sort of like the old' "flash of unstyled content (FOUC)" problem, but with a white screen instead... call it a "flash of white (FOW)" problem.
Anyone else seen this? How can I get rid of it? I've tried everything I can think of:
Setting the body background color to black, at the top of my first style sheet.
Setting the body background color to black, way up in the head, with a separate style tag:
<style type="text/css">
body {background: black }
</style>
In my desperation, I even resorted to adding (gasp!) an inline style to the tag:
<body style="background: black">
Nothing seems to work... I get this annoying flash of white every time I load a page.
Any ideas?
Thx, Keith :^)
My Rails app has a page that can be displayed in an iframe of a third-party website. I would like to change the content of my page based on iframe size. (For example, display only 1 element instead of 3, if the iframe size is small).
Is there a way to do this?
You'll probably want to take a look at media queries.
The basic idea is something like this:
#media (max-width: 768px) {
.hide_on_small_screens { display: none; }
}
You can then add this or similar classes to the objects you want to hide/show. Alternatively you can just write the code for say a class like .iframe_wrapper
My jquery mobile page is WAY to zoomed out. I have tried everything I can think of, but I cant get it to zoom in.
This is the last thing I have been trying:
.ui-mobile-viewport {
max-height: 440px !important;
max-width: 500px;
}
How do you zoom in a page? I just want the page to fit normally on the phone
I believe you are looking for the viewport meta tag: http://davidbcalhoun.com/2010/viewport-metatag
EDIT:
Perhaps I don't fully understand the problem, but maybe you could try to fix it within the following CSS #media queries:
#media all and (orientation:portrait) {
/* set some widths maybe? */
}
#media all and (orientation:landscape) {
/* second verse same as the first */
}
Finally, if I'm still off base, do the answers here help? How to set viewport meta for iPhone that handles rotation properly?
Say I have an existing CSS for desktop (desktop.css). I want to include iPad Safari css.
In desktop.css, can we just do a condtional import at the end..
#media only screen and (device-width : 768px)
{
#import "ipad.css"
}
In ipad.css, we will have only iPad relevant styles..
/* iPad Styles */
i.e. if it is an iPad user, the ipad.css would get imported, else it would be ignored.
What is the best approach?
In desktop.css, can we just do a condtional import at the end..
Actually, no, #imports have to come before any other style declarations.
But in your case, if you import your iPad styles at the beginning they'll probably all get overridden by your desktop styles. So you're better off using another <link> element with that media query and pointing to your ipad.css instead:
<link rel="stylesheet" media="only screen and (device-width: 768px)" href="ipad.css">