I have the below code in my css file:
body {
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: none;
-ms-text-size-adjust: 100%;
font: normal 75% 'Poppins', sans-serif;
}
When I look at my website in portrait, it's fine. But then as soon as I rotate into landscape, my font scales up to the increased size. I want the font to remain completely as it is. The above code seems to have fixed the issue for many other people, but as you can see from my screenshots, the font is clearly larger in landscape when compared to portrait.
Screenshots below:
Portrait
Landscape
Turns out it wasn't strictly an issue with the font...it was a viewport issue:
<meta name="viewport" content="width=device-width, initial-scale=1">
Try splitting up your css font into:
font-family: 'Poppins', sans-serif;
font-size: 1.5em;
Check out the font-size documentation to see the difference between relative, percentage, and length values.
Related
As explained here, the Apple iPhone (i.e. Safari) rescales the font-size when the viewport changes (i.e. from portrait to landscape or vice versa).
The accepted answer to that question says that, in order to disable this behaviour, one should add:
-webkit-text-size-adjust: none;
(Note: in other posts I've also seen '100%' instead of 'none', which may be preferable, but the distinction seems irrelevant here.)
Accordingly, my main question is why, when I view the following HTML test-file on my iPhone, the fixed-sized font is STILL rendered bigger in landscape as compared to portrait view:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
p {
font-size:24px;
-webkit-text-size-adjust:none;
}
</style>
</head>
<body>
<p>This is an example text</p>
</body>
</html>
However, I'd also like to have it confirmed that the Apple iPhone - and possibly other Apple devices - are the ONLY devices displaying this (to me, annoying) behaviour... is that true?
Incidentally, I find it annoying because I can't test properly on my iPhone if my website (i.e. font-size) is rendered differently on other mobile devices (and I don't fully trust online emulators).
Thanks.
It does appear that this solution is right.. but according to Mozilla it is still experimentall.
These are the full set of values you can try but developers are still working to get the mobile algorithm correct to not have the issue are experiencing. Maybe one of the other values would work better for you.
/* Text is never inflated */
text-size-adjust: none;
/* Text may be inflated */
text-size-adjust: auto;
/* Text may be inflated in this exact proportion */
text-size-adjust: 80%;
/* Global values */
text-size-adjust: inherit;
text-size-adjust: initial;
text-size-adjust: unset;
You can find more information here.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust
I am new to CSS/HTML. I have created this website and I want it to look good on mobile phone as well. When I browse the website from my iphone it is scrolled out at max and the text from frow(first row -£20 voucher),srow(second row-at),trow(third row - £4.99) are very small, unreadable. What's wrong?
.frow {
font-size: 60px;
font-weight:900;
}
.srow {
margin-top:10px;
line-height:5px;
font-size: 45px;
font-weight: 600;
}
.trow {
color: #FF0000;
text-shadow: 2px 2px #000;
font-size: 100px;
font-weight: 900;
}
You will have to define the meta viewport in order to support mobile devices the way you want:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
Include this in your <head>.
Modern mobile browsers usually scale the page down, if the viewport doesn't define something else. With the viewport, the page is not scalable (user-scalable=no) so it just looks like opened on a small window.
The next step would be, if not already made, making the page usable on small screen resolutions. In order to achieve this, CSS media queries might be helpful.
About the viewport meta tag: http://html5-mobile.de/blog/meta-viewport-fuer-mobile-anpassen
About CSS media queries: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Instead of hard coding the length, you can try out twitter bootstrap framework from: http://getbootstrap.com/, which can easily create mobile friendly layout.
I understood that the default font-size was 16px on browsers. Then why is the height of the inline-block(12px) same as the font-size (I've tried in Chrome and FF) ? Please help me understand. Thank you.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font: 100% helvetica, arial, sans-serif;
line-height: 1.625;
}
#tempTest {
display: inline-block;
width: 10px;
height: 12px;
background-color: orange;
}
</style>
</head>
<body>
<p class="heading"><span id="tempTest"></span>Remember, when you were young, you shone like a sun. Shine on you crazy diamond</p>
</body>
</html>
If you inspect the inline box using a browser’s Developer Tools (hit F12 to open them), you can see that its height is indeed 12px, as set in your code. This happens because there is nothing in it that would require more height; in general, the exact calculation of heights of inline blocks is browser-dependent.
The font size of the text is still the browser default, typically 16px. The font size does not mean the height of any particular letter. It is just a fundamental property of the font; typographers usually design characters so that they - together with ascenders, descenders, and diacritic marks - fit into the limits set by the font size (or extend over them just a little), and normally most letters have smaller height.
I have a quite unusual problem with the rendering of a textarea-field in Firefox. I haven't tested other versions than 18.0 on a Mac until now.
My problem is, that the font-size always is relative to 13px (the os-default) and not to 16px what it's parent has.
If I define a fixed font-size for it's parent, it works as expected. But if all parents have a relative font-size the textarea's font-size is just relative to my OS-default.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Firefox ..</title>
<style>
/* Fixed sizes */
/* body { font-size: 12pt; } */
/* body { font-size: 16px; } */
/* body { font-size: 0.4234cm; } */
/* Dynamic sizes */
/* body { font-size: 1em; } */
/* body { font-size: 100%; } */
/* body { font-size: medium; } */
textarea { font-size: 1em; }
</style>
</head>
<body>
<textarea rows="4" cols="20">abc</textarea>
</body>
</html>
Similar question, but does not cover my case: Why <textarea> and <textfield> not taking font-family and font-size from body?
Anyone experienced something similar before, or can confirm this behaviour in other Browser(version)s or OSes?
EDIT: Here's the code on jsfiddle.net: http://jsfiddle.net/E4WwV/
In Firefox (I don't know if other browsers have that too) you have the possibility to set two default font-sizes:
Default font-size (16px)
Default font-size for text having the generic font-family monospace (13px)
Since the default font-size in my example is just 1em (for the textarea and the body) it's 1 times the default font-size which is 13px for all monospaced text and 16px for all other text.
Here is an article that has a great explanation and also a usable work-around to this:
http://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/
Textarea and body use different font families. Textarea defaults to using a monospace system font, and there is some weirdness for system fonts to size them based on your browser's font preferences in Gecko. So if your preference set the normal size for your monospace font to 13px, that's what you're going to end up with in this case...
I'm designing a site with a fixed repeated background but can't work out why it has one problem.
If you load the site in a small window, then scroll right, the background doesn't carry on and the background colour show's instead.
Any ideas?
Site is: http://new.focalpix.co.uk/
CSS for the background is:
body {
background: url(http://media.focalpix.co.uk/img/gradbackground.png) repeat-x fixed;
}
Try the following CSS:
body, html {
color:#fff;
background: #000 url(http://media.focalpix.co.uk/img/gradbackground.png) fixed repeat-x;
text-align:center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans serif;
}
body {
font-size: 70%;
}
It looks like (in both Opera and Chrome) the browser is treating the area outside the browser's initial viewport as part of the HTML tag but not part of the BODY. You can verify this by putting the background-image on the HTML but not the BODY tag - and then see how it appears only in the scroll-to-view area of the document. I have no idea why this is happening - anyone?
CSS above appears to fix the problem, though.
you have defined body background: url in style.css line 13, but also defined rules for body background in the rule starting on line 17.
The rule on line 17 is for body, html, but the one starting on line 11 is just for body. You could probably condense these into one rule, defining exactly what you want the background to be -- a colour or an image from a url
This is due to the fact that the <body> tag is set by default to 100% of the width of browser window - not the site. This means when the width of the window is less than 960px - the width of your site, the body block ends. To fix this, simply set:
body {min-width: 960px}
Unfortunately, min-width does not work in old versions of Internet Explorer without a JavaScript hack called minmax. I would suggest enclosing the javascript embed code for it inside some conditional comments to prevent an unnecessary HTTP request and potential compatibility errors in new browsers. So embed minmax like so:
<!--[if lte IE 7]>
<script type="text/javascript" src="minmax.js"></script>
<![endif]-->
Also, a general tip - these issues are fairly easy to resolve by playing with firebug.