Are there CSS or other reasons why Safari/iPhone would ignore some font-size settings? On my particular website Safari on the iPhone renders some font-size:13px text larger than font-size:15px text. Does it maybe not support font-size on some elements?
Joe's response has some good best practices in it, but I think the problem you're describing centers around the fact that Mobile Safari automatically scales text if it thinks the text will render too small. You can get around this with the CSS property -webkit-text-size-adjust. Here's a sample of how to apply this to your body, just for the iPhone:
#media screen and (max-device-width: 480px){
body{
-webkit-text-size-adjust: none;
}
}
Use 100% instead of None.
normalize.css includes this
Also, make sure you are setting the initial zoom setting to 1 in your viewport meta tag:
<meta name="viewport" content="width=device-width; initial-scale=1.0;" />
Also check if you don't have a "width/height" set to the elements you're manipulating, Safari gives sizing precedence over font size in svg's, Chrome and FF don't, it seems, currently at least.
I had the same problem, turns out in the original CSS there was this line:
-webkit-text-size-adjust: 120%;
I had to change it to 100%, and everything was smooth. No need to change all px to em or %%.
Related
Is it possible to override font boosting in mobile chrome?
I searched the internet before ~including stackoverflow~.
I found that some people say it's impossible, and I also found meta tag that helped the text but also decreased the area of the text... which is not good..
Will appreciate your help..
adding following line to my reset.css worked for me
html * {max-height:1000000px;}
There is no real possibility for disabling font boosting. There may be some hacks, but they are meant for something different and, in fact, do something different.
Try text-size-adjust:
html {
text-size-adjust: none;
-ms-text-size-adjust: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
}
It looks like there are a few people that have methods for making it work.
Add some CSS rules or give parent element width and height.
It is a webkit official bug. You can check on Webkit official site
You have to target only specific element where you have to override font boosting rather than targeting unwanted elements. i.e.
p {
max-height: 999999px;
}
Matt and Kundan Sankhe answer are the best solution at the moment.
.element { max-height: 999999px; }
If the problem still occur try add this inside the head tag:-
<meta name="viewport" content="width=device-width, initial-scale=1">
But bear in mind that this can cause problem to image tag or image background-size tag.
Android Chrome only applies font boosting to elements with dynamic height. As soon as you specify a height,max-height or line-height, font boosting is not applied. But you should be careful of the inline element like span whose height or max-height property is invalid. In that case you can set the display to inline-block as the below code or other box types whose height can be setted.
span {
font-size:12px;
line-height:12px;
display:inline-block;
}
For desktops, and likely mobile (haven't tested mobile), you can disable font size boosting in Chrome and FF by setting a base font size on the HTML element. For example:
html {
font-size: 16px;
}
This is less hacky than max-height. But, still dirty from an accessibility standpoint.
You can also use jQuery to set this if you have to.
I am using Google's web font api with the font "Lato", font-weight of 100.
On the desktop browsers I have tested everything displays fine. However if I view the web page with iPad or iPhone (both iOS5) I notice that the font is extremely thin and the only thing that seems to be displayed correctly are the dots.
I tried implementing the font using the Javascript, LINK-Tag and CSS #import methods, all produce the same results.
I saw that in the FAQs they state:
The Google Web Fonts API works reliably on the vast majority of modern mobile operating systems, including Android 2.2+ and iOS 4.2+ (iPhone, iPad, iPod). Support for earlier iOS versions is limited.
Which means it should work, right?
Is there anyway to solve this?
Thanks
Something I have seen to help really thin Fonts (Incidently also Lato) is this:
-webkit-text-stroke-width: 0.1px;
Anyway it's only a case by case basis, I would use a class / media query to make sure to only apply it when needed (safari(with a class set by js) on a scale under 1.0 or something). Try higher float values if needed.
It seems to me that it's an unlucky combination of an ultra thin typeface with the way Mobile Safari scales the website to fit in the screen. Normally fonts have hinting that allow your computer to interpret how to paint pixels if it gets to subpixel levels, but this is overridden by Mobile Safari's scaling, and thus paints half pixels as semitransparent.
You could prevent mobile safari from downscaling your website by adding the following meta tag:
<meta name="viewport" content="initial-scale=1.0; minimum-scale=1.0">
If you want the font to appear smaller in mobile safari, the solution would be to keep the previous declaration and declare the font size a media query:
#media only screen and (max-device-width: 480px) {
font-size: 15px;
}
If all else fails, I'd add a 0px text shadow:
.selector {
text-shadow: 0 0 0 white;
}
Maybe it's -webkit-text-size-adjust 's fault.
Try
-webkit-text-size-adjust : none
You could try adding this to your CSS for the element in question:
-webkit-font-smoothing: subpixel-antialiased;
Similarly, you may have transforms effecting the antialiasing. You could also try:
-webkit-transform: translate3d(0,0,0);
And even...
-webkit-backface-visibility: hidden;
Crazy, I know.
Are you using Ultra-Light 100? If you set it to 100 but the file is another weight Mobile Safari could be trying to simulate the thinner variant.
Either way, try -webkit-font-smoothing: antialiased;, if that doesn't work you're out of luck, try the 300.
Here are my styles:
Parent container:
div.musicContainer {
width:820px;
height:54px;
margin-bottom:20px;
}
Child containers:
div.hardcorePlayer {
width:400px;
float:left;
border:none;
background-color:#996600;
}
div.feedbackPlayer {
width:340px;
float:right;
border:none;
background-color:#996600;
}
The issue is: i installed IE9 yesterday and while IE8 was displaying fine well now the feedbackPlayer div is not lined up to the right boundary any longer. it displays fine in other browsers as before.
is this a IE9 bug?
IE9 image:
other browser image:
thank you very much for your thoughts on this.
website url: www.guygar.com/guygar.html
NOTE: here is the new CSS with the reset data. Have i done something wrong?
Maybe you should try to reset the css so that all browsers start out with the same defaults (like padding, margin ect.)
You can find a css-reset and more information here: http://meyerweb.com/eric/tools/css/reset/
Edit:
Related question: https://stackoverflow.com/questions/116754/best-css-reset
This line is in flash.
Change body background to white, and .musicContainer to red. You will see that html is not failing. In my opinion it is a flash like bug.
Try zooming in FF ( I tested in 5.0) on few zooms there is also same gap.
I couldn't find a css reset being used on the site you provided. It may just be a difference in how IE9 displays different elements (margins, padding etc). I tried out the provided website in IE9 and didn't see the problem so it's a bit difficult to diagnose, though.
I'm using this approach for my websites I created prior to IE9.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
Let it be the very first meta tag in your head tag, and IE9 will act as it was IE8, hopefully in the same identical way.
It solved all my problems in all my websites until now.
Enjoy
It's related to flash redrawing. It behaves the same in ie8. Try resizing the browser window width and you will see that it doesn't update correctly.
Why dont you try a html5 player like http://www.jplayer.org/ instead?
Maybe try using js to check the browser and alter the size or position with js in an if statement.
w3 schools has a nice tutorial on browser checking.
http://www.w3schools.com/js/js_browser.asp
On IE 8 and Firefox (3.6 and 4), if you go to Print Preview, you adjust the Print Scale by a a percentage or use Shrink to Fit. Does CSS have a property like scale:50%; or something to adjust the print scale?
There is Zoom:
http://reference.sitepoint.com/css/zoom
And moz/webkit-transform:
http://help.dottoro.com/lcebdggm.php
<style type="text/css" media="print">
body {
zoom:75%; /*or whatever percentage you need, play around with this number*/
}
</style>
Since zoom or -ms-zoom doesn't work the way I expected it to on IE8, I ended up fiddling with the font-size and tr sizes. Hopefully MS makes a zoom that works like the Print Scale/Size functionality in the Print window from the browser.
I have a text item on a web page that appears too large in opera browsers. Is there a way to edit text size and other aspects of the css for only opera?
check out this link (scroll down to the part about Opera)
Here
(I never knew this but...) apparently you can use:
#media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
.operaSpecificStuff { }
}
Opera has a bug in font size defined by em or %. Just reset the font size like this:
body { font-size: 16px;}
Opera doesn't allow for font-sizes smaller than 10px – which results in having bigger fonts on small texts in Opera only. This is intended by design as this setting can be changed by the user only.
See the following thread: http://forums.devshed.com/css-help-116/force-opera-to-use-font-size-less-than-10px-or-763589.html