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
Related
My intro photo slightly covers the breadcrumbs panel on IE and Chrome, see here https://www.hawaiidiscount.com/luaus.htm
It looks fine on Safari and Firefox.
I have been reading on the Internet about css specific code for IE and tried different methods to fix that, but it doesn't work. What am I doing wrong? Thanks!
<!--[if IE]>
<style>
.breadcrumbs {
margin-top: -22px;
}
</style>
<![endif]-->
<style>
.ie .breadcrumbs {
margin-top: -22px;
}
</style>
<style>
#breadcrumbs {
margin-top: -22px;
}
</style>
It's possible that the different heights are due to the different font rendering engines on the different browsers, as this element is being positioned by <br /> elements.
You're able to use conditional statements, such as
<!--[if IE]>
.element{
margin-top: 10px;
}
<![endif]-->
.. to add code that only IE6 - 9 will render, however this will not work in IE10 and above.
You could also browser sniff, but this is really not a good solution as it's better to have one codebase that works across browsers. You also won't be able to anticipate all browsers that your users will use.
The website you've shared is also using quite a few negative margins and absolute positions, which can also cause inconsistent layout issues.
My suggestion would be to remove all <br /> elements, remove as many of the negative margins and absolute positions as possible and lay the page out using a simpler system. For instance, you've split out the background of the breadcrumbs from the text of the breadcrumbs - these should really be together so that you can easily style them together.
Hope that helps
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'm wondering why the font-size can be so different on my desktop and on my Android (the default browser, Chrome, on an up-to-date system).
In summary, the font-size in <p> (paragraphs) is too big on Android.
I use a CSS reset stylesheet (article in french).
Firefox 25.0 on Linux
You can see that the text of the Lorem ipsum paragraph is decreased (relatively to the text of the page). The Title has larger text.
Android Chrome (cropped)
The size of the text in the Lorem ipsum paragraph is close to the size of the Title. Why Chrome don't display the text with a smaller size?
Example
See the jsfiddle: edit, fullscreen and fullscreen without jsfiddle bar.
The topic is old but still..
I found some workarounds for this. Still fighting though:
If you force the paragraph to have a height, it turns normal again.
Setting <meta name="HandheldFriendly" content="true"/> also fixes all paragraphs instantly.
Enjoy.
<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=yes"> in the <head> tag could disable zoom on Android devices
Could use -webkit-text-size-adjust / text-size-adjust property
edit: check this Android Chrome ignoring -webkit-text-size-adjust:none property. Text is being scaled when zoomed out
You might be running into this known issue in Chrome for Android. Relevant text below:
Font size is inconsistent on some sites, such as Reddit and T-Mobile.
We're working on improving the display of non-mobile sites on phones, especially ones that use a large range of styles and fonts.
It works for me in Chrome on my iPhone. Have you tried another browser on your Android device to see if you get a different result?
Also, I would remove that huge CSS reset and start with more basic CSS. That makes things like this easier to debug. How about starting with: http://jsfiddle.net/mb8Db/1/
<style>
body {
font-family:"Century Gothic", helvetica, arial, sans-serif;
font-size: 1.4em;
line-height: 1.5;
}
/* failing on Android */
body > main > article {
font-size:1em;
}
body > main > article p {
font-size:0.75em;
}
</style>
<main>
<h3>Header</h3>
<article>
<header>
<h3>Title</h3>
</header>
<p>Paragraph</p>
</article>
</main>
RGBA -- workaround for IE is “DXImageTransform.Microsoft.gradient".Found a handy tool provided by www.css3please.com for cross browser transparency,but applying this gradient on IE(IE8) -- works,but the text loses its clearness/legibility.
applying georgia to make the font look uniform on all the browsers,but the text does not appear properly after i apply gradient . Here's the JSFiddle http://jsfiddle.net/mvivekc/GJaDy
the code is--
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<html>
<style type="text/css">
.georgiaWithTransform{
font-family: Georgia;
height: 80px;
width: 800px;
font-family: "Georgia", Geneva ;
word-wrap:break-word;
background-color: rgba(150, 150, 150, 0.3); /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C969696,endColorstr=#4C969696); /* IE6–IE9 */
zoom: 1;
}
.georgiaWithoutTransform{
font-family: Georgia;
margin-top: 30px;
height: 80px;
width: 800px;
font-family: "Georgia", Geneva ;
word-wrap:break-word;
background-color: rgba(150, 150, 150, 0.3); /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */
}
</style>
<body>
<div class="georgiaWithTransform">Georgia does not appear properly with transformation in IE 8,and i do not understand why this is happening</div>
<div class="georgiaWithoutTransform">Georgia properly without transformation in IE 8,You can notice the difference in the appearance of the text here as compared to the top part( Noticeable only in IE)</div>
</body>
</html>
Cant understand why this is happening and badly need a workaround for this problem.
Here's a screen shot of the problem on IE8 --
Same happens on the fiddle as well.. problem is seen only on IE,not sure why..
Please help,
Thanks in advance
I had a similar problem once with opacity filters in IE, the alternative that was suggested to me was using 2x2 image and background-repeat. In your case, you could try the same with a 1px width and the content height as height for your image with the desired gradient applied. This may not help you much but, here is the link to aforementioned question.
P.S : using an image as a workaround did work like a charm for me.
IE Filter Antialiasing problem
Alright, that's what I thought was happening. The filter's turning off the anti-aliasing in the font. You can see a solution offered here. Biziclop created a small jQuery script you can use and has a sample of it working here. This will force the browser to fake the anti-aliasing.
Has anyone been able to succesfully use the IE CSS hack #IEroot? I stumbled upon it from this article but it doesn't seem to work for me.
I'm trying to fix/hack the inline styling bug to produce li inline blocks
#featured li {
margin:0px;
padding:0px;
width:317px;
height:310px;
display:inline-block;
border-left:1px #bdbdbd solid;
}
#IEroot #featured li {
display:inline;
}
Any help would be greatly apperciated, thanks.
IT DOES WORK, exactly as described, EVEN in IE8, and is actually a pretty smart CSS hack to get around IE specific bugs.
You MUST swap out the DOCTYPE line for a REAL DOCTYPE though first.
Here is the code from the link, tweaked to be a working sample.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
/* all browsers make border red */
#IE { border : 2px solid red; }
/* all browsers see this, but only IE thinks #IEroot exists as an element and makes border blue */
#IEroot #IE { border-color : blue; }
</style>
</head>
<body>
<!--[if IE]>
<div id="IEroot">
<![endif]-->
<p id="IE">This browser is IE. (red in all, blue in IE)</p>
<p id="notIE">This browser is not IE.</p>
<!--[if IE]>
</div>
<![endif]-->
</body>
</html>
I'm using a beta of IE8, and the example on the page that you are referring to does not work. The live demo also doesn't seem to take IE8 in count.
These kinds of hacks are clever, but I'd advice you to stay away from it.
Whenever you encounter differences between browsers, there are always alternative ways to do the same thing in such a way that it works for all browsers.
I've made more websites full of CSS than I can count, and I never ever resort to browser-specific code, especially not the kind that exploits bugs in specific versions of browsers. They solve a tiny problem today, but give you twice the headaches tomorrow, and are a bitch to maintain.
If you insist on using such a hack, make sure to add a comment like this:
/* >>>>>>> BUTT-UGLY BROWSER HACK! FIX ME!!!!! <<<<<<<< */
#IEroot #featured li {
display:inline;
}
:-)