I am NOT talking about zooming the page, but rather the way MobileSafari on iOS automatically bumps up some font sizes sometimes.
When, exactly, is this done? Can it be prevented or discouraged?
body {
-webkit-text-size-adjust: 100%;
}
Just make sure all your text is at a legible size in the first place. The iPhone and iPod touch have a rather small screen, so keep that in mind too.
Had a lot of trouble tracking it down, but: it’s the -webkit-text-size-adjust property in CSS.
Values:
Percentage (of default size), e.g. 120%, or 100%
auto (the default)
none – if auto isn’t working for your page. However this often causes problems with zooming. Use 100% instead. For example, open Safari on your desktop and zoom the page (Command-Plus) – your text won’t be enlarged, even though the entire page has zoomed! Don’t use none!
Note that these can be applied not just at the page level but at the element/widget/container level.
(I would not just specify a value of 100% for my website unless I was damn sure it was already optimized for small screens, and never none since it causes problems.)
Please note that in Firefox Mobile (e.g. for Android and Firefox OS) there is a similar property, -moz-text-size-adjust, documented here. Thanks to Costa for pointing this out.
Update, 10 years later: This MDN page is probably best for checking what browsers' current compatibilities and vendor prefixes are for this property.
The accepted answer works, but in other webkit browsers it locks in the font-size for people that are zooming. Using 100% instead of none works both ways:
body {
-webkit-text-size-adjust: 100%;
}
Related
I'm working on a responsive website and when checking it on my iPhone (iOS 13, June 2020) I found that the font size was different between Safari and Chrome.
I tried several things to account for it, but had trouble finding the cause.
I suspected it was related to some CSS I had from long ago: -webkit-text-size-adjust: 100%; Removing and changing this value had no effect on the difference though, so it was a red herring.
What would cause a discrepancy between the rendering of the same site and CSS on these two apps?
Here are two potential causes, there are surely more, but these were the ones I found and solved my problem.
Chrome obeys the system-wide "Text Size"
If you use the "Text Size" slider in control center, or the related settings at the system level, Chrome automatically alters the text of sites!
From what I can tell, there's no setting in Chrome for iOS to disable this linkage with Text Size.
So if you want Safari and Chrome to match, make sure that the Font Size state of your phone is in the middle position that's marked as "Default".
Good to know both in case you use the Text Size controls day-to-day like I do, or your users or clients do!
Safari has a "Page Zoom" setting in Settings app
On the other side, Safari has a setting called Page Zoom that goes from 50% to 300%. It's found in the Settings app under Safari > Settings for Websites > Page Zoom.
This setting can cause total chaos with CSS layouts at sizes like 200%.
Either way, if there's a discrepancy between the two apps, this Page Zoom setting is worth checking out as well.
Thank you for pointing me in the right direction - I've been having horrendous problems working out why Chrome on my iPhone SE was rendering text larger than Safari!
I don't seem to have a "default" setting for Text Size (Settings > Display & Brightness > Text Size).
However, -webkit-text-size-adjust: 100% did work for me - at least for Chrome which was where I was struggling.
In iOS 13, Safari exposes the media font-size to the final user, it means that in your root page (html tag) the css "font-size" rule is overrided, forced by the user and not possible to change.
And Chrome for Safari is not using rendering engine "Blink" as for Android, it's using Safari webKit render engine, so, Chrome for iOS is "Safari"
Anyway, you can react to this adjusting your media queries to work with "em" units instead of "px" in other words:
Change bootstrap (if used) breakpoints to "em" instead of default pixels.
Make your components border, paddings and other stuff pixel based.
Another way is understand what are the users needs and react before they need to adjust the font-size:
Adjust font size based on viewport (css clamp)
Use responsive layout
Use css border-box, box-shadow...
Another way is recalculate everything, at much cost:
What if the user changes the root’s font size?
I had a weird problem with paragraph on iOS14 ,13, it was enlarged, this has worked for me for Safari and Chrome:
-webkit-text-size-adjust: none;
I hope it will help someone too.
I'm currently working on a html email for various clients, and having some strange issues using gmail (yay) - specifically, when viewing an email through the browser. (No issues in the app)
The issue only really comes about when using the browser on a small screen (eg mobile) - all the images are displaying too wide, despite a max-width, meaning the layout is stretched and requires horizontal scrolling. Whilst it causes no issues on desktop, the same thing happens to the code
On my images, I've set
style="max-width:100% !important;"
inline on each image. I also have a <style> block in the head with
img {max-width: 100% !important;}
When inspecting the image element (both on my phone and pc), I'm seeing no sign of the max-width from the head, which is not totally unexpected.
What's weird is that each image still has a max-width set inline- BUT it is no longer in %, but in px.
Inspected in the pc browser, the inline max-width now says
max-width: 1920px;
Viewed on my phone (android, inline max-width is
max-width: 767px;
In this case, the image is now WAY too wide and is breaking the layout. The same thing happens on all images, regardless of their actual size.
I'm not seeing any message telling me that the email has been adapted for my screen, or any option to turn this on or off.
Has anyone had this happen before? Any ideas on how to prevent gmail messing with the max-width, or getting it to respect the max-width in the head? (I've avoided using classes or id's to attach styles from the head as as far as I know, google strips these out)
Even weirder (or maybe I'm losing it...) I'm SURE this was working yesterday...
UPDATE: think I've solved why it was apparently working yesterday - it wasn't - changes I'd made in dev tools weren't clearing when I reloaded, so the max-width I'd added in as a test (replicating a max-width in the head) was still there...
After a bit more playing, adding width: 100% !important; inline on all wide images seems to work as a fix - gmail doesn't mess with the value. Would still be interesting to know why it changes the value of the max-width though, if anyone has any clues!
Gmail is notorious for misusing its maxwidths for set layouts.
try and avoid setting max-width to a percentage value for elements that aren't high level containers. you will run into weird rendering on things like gmail app as well. typically gmail app converts all widths into max-widths so it can crunch your content but still maintain the structure at higher screen resolutions.
gmail webapp does something similar. it restricts the widths you can set an element to so you can't add things that are wider than your display, at which the gmail web app is displaying at 100%.
gmail mobile app - forces your content into a 320px/480px wide box
gmail desktop app - forces your content to never exceed your screen res
Gmail desktop treats styles in the head quite strange anyway, it completely ignores most classes/id's (don't listen to people that say it strips them completely) if you use other tags as identifiers other than #id and .class it will apply those styles. e.g.
* [lang~="identifier"]
lang is pretty much the only tag that you can use that wont get in the way of tags that are being used, i.e. Alt, Title and Href.
Just be careful, if you are using media queries or anything that starts with "#" in the style tag gmail may potentially (depends on how its feeling that day) completely remove that style tag. You can avoid this by adding those styles in a style tag in the body though.
in conclusion. Don't rely on max-width to control your layout from inside out, set pixel values to limit width="100%".
Hope this helps
I am working on a web application that allows me to insert some custom css for the front page.
I want to have a full screen background image at the start page. I understand that I can use background-size:cover which is supported in all latest version of browsers.
body {
background-image:url(/File/Publisher/Start/startpage_background.jpg);
background-repeat:no-repeat;
background-size:cover;
}
This works for latest version of Firefox and Chrome. However, it is not working in IE11. The background image does not shrink to cover the entire screen. It displays at its original size and is partially cropped off.
Using F12 to debug, I discover that if I disable either margin-top or margin-bottom (see screenshot), background-size property will work.
I do not want to modify the margin property introduced by the original CSS of the web application. Any way to resolve this problem?
I came across this as well and found that giving body any height makes the cover property have effect as long as it's not set as a percentage. For good order, min-height: 100vh should do :
http://codepen.io/anon/pen/oXmzLL?editors=010
Pretty odd since there's no issue on any other browser but that's IE for ya. Of course it's only present if the content doesn't exceed the window size (edit - it should also not have positioning that takes it out of the document flow).
Not the quickest answer by the way but it's the only topic I came across on this subject (that wasn't about legacy browser support)...
I have a problem with this page. I developed it in Firefox on it's default zoom level. The idiot that I am, I haven't tested it on Chrome. So, now I see that the page's layout and/or font size is different on Chrome and other Webkit based browsers. Default Chrome zoom level is 75% so everything is smaller on Chrome. I have to say that I've made a dozen of web apps but have concentrated on the backend side of the application and never put many thoughts in how the page looks like on different browsers.
I mean, I have if javascript cross browser stuff had to be addressed but this is something that I never came across.
What I think is wrong with this is font size. I have a #main-wrap that wraps the entire app and has a base font size of 16px. So, #navigation a has 0.7em because that way it looks normal in Firefox, but looks really small in Chrome.
Could anyone post some tips or hints as to way this is happening?
EDIT:
I've fixed the problem with
zoom: 1.29;
-moz-transform: scale(1);
-moz-transform-origin: 0 0;
And it works but, as I know, it's a good to do this like this. Is there a CSS technique do make pages look the same across browsers?
I've had this issue as well. Using the #viewport tag works well. Here are the articles that I used to resolve the issues:
Firefox #viewport tag - https://developer.mozilla.org/en-US/docs/Web/CSS/#viewport
Setting viewport and zoom - https://css-tricks.com/snippets/html/responsive-meta-tag/
To make sure fonts display weight properly across browsers, an article regarding faux font bolding is http://alistapart.com/article/say-no-to-faux-bold
There are a lot of similar questions with suggestions. Here's one that helped me:
https://stackoverflow.com/a/26353104/2256476
Here is your Answers......
For Firefox :
open up a new tab, and type about:config into the address bar, and
press enter.
Then use the search box, enter the word "pixel" then it will show
"layout.css.devPixelsPerPx".
change the value -1.0 to 1 for 100% perfect scale...
For Chrome:
Right Click the chrome icon or chrome shortcut icon, go to the
properties.
Then in the "Target:" field, Click the field and press end button.
Now you are seen this "chrome.exe" at the end.
copy this text : chrome.exe" /high-dpi-support=1
/force-device-scale-factor=1
and paste on chrome.exe"
Then Restart chrome or close the browser and double click the
shortcut icon.
The reason for the difference is because Firefox uses the system zoomlevel. Which is set at 125% by default on Windows. Whereas Chrome uses a default level of 100%.
I would advise to design for Chrome, because then the text will always be readable.
Imagine CSS like:
.x {
background: blue none;
border-radius: 6px;
}
and HTML like:
<div>Words and <span class="x">decorated</span> words</div>
The height of the span reading 'decorated' is going to vary wildly between different browsers, and between different OSes running otherwise the same browser.
Is there any way to make it be the same height?
(I don’t want to move to inline-block or sacrifice the text using exactly the same baseline.)
My experience with avoiding of different height is setting exact line-height and font-size
Sounds like there is something else causing your problem. I just tried a basic html5 document with the snippits from your question and compared the alignment on Windows with Chrome, Safari, FF & IE. They all rendered exactly the same except for IE9 which had a 1px gap above the span only.
Granted Mac renders fonts differently from Windows, and I didn't test on linux or mac, but 9px!!!??? Here are some things I'd investigate:
First, try a basic test file if you are working in a larger project, this will limit your variables.
Second, try setting explicit fonts and ensuring they exist on all of your test machines - perhaps linux is falling back to a different font.
Third, make sure you are not zoomed in or using a custom font size browser setting on any of the browsers (I ran into this one a while back where somehow my IE was set to 105% zoom.)
Finally, if all of that fails, you might want to try using a web font (#font-face) and see if that renders more strictly.
Edit:
In lieu of the new information in your comment, another strategy would be to use JavaScript to inspect the rendered heights of some off-screen elements and then programmatically adjust styles accordingly. You'll probably get a huge FOUC, but you can use a whiteout div to minimize the shift.