Some font-size's rendered larger on Safari (iPhone)
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;
}
}
Fix font size issue on Mobile Safari (iPhone) where text is rendered inconsistently and some fonts are larger than others?
Mobile Safari (like Chrome for Android, Mobile Firefox and IE Mobile) increases the font size of wide blocks (at all times), such that if you double-tap to zoom in on that block (which fits the block to the screen width), the text will be legible. If you set -webkit-text-size-adjust: 100%
(or none
), it won't be able to do this, and so when a user double-taps to zoom in on wide blocks the text will be illegibly small; users will be able to read it if they pinch-zoom in, but then the text will be wider than the screen and they'll have to pan horizontally to read each line of text!
Ideally you would fix this by using Responsive Web Design techniques to make your design adapt to mobile screen sizes (in which case you would no longer have any very wide blocks, so mobile browsers would no longer adjust your font sizes).
If that's not an option, and you're stuck serving a desktop site to mobile users, then see if you can tweak your design so none of your blocks of text are wider than the mobile device's device-width (e.g. 320px for many portrait phones) (you can use mobile-specific css to avoid affecting desktop browsers), then Mobile Safari won't need to increase any font sizes (and browsers which reflow text, like the Android Browser and Opera Mobile, also won't need to change your layout).
Finally if you really need to prevent Mobile Safari from adjusting your font sizes you can set
-webkit-text-size-adjust: 100%
, but do this only as a last resort since it is likely to cause mobile users to have difficulty reading your text, as it'll either be too small or they'll have to pan from side to side after every line they read. Note that you must use100%
notnone
because none has nasty side-effects in desktop browsers. There are also equivalent-moz-text-size-adjust
and-ms-text-size-adjust
properties for Mobile Firefox and IE Mobile.
Edit: for example in your case the simplest is probably the 2nd alternative, so you could try adding the following CSS:
/* Mobile browsers only */
@media only screen and (max-device-width: 480px) {
table#all_results {
width: auto;
}
td#main_box {
width: 320px;
}
td#side_box {
width: 320px;
}
}
Though it's not ideal to hardcode 320px like this; you could improve on that by using a variety of CSS media queries, or getting the device-width from JavaScript.
Why is font-size different on iOS Chrome v. iOS Safari?
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.
Font size rendering inconsistencies on an iPhone
To improve on Lukasz's idea slightly, try using the following rule in your CSS:
body {
-webkit-text-size-adjust: 100%;
}
Using the value '100%' instead of 'none', allows all other Webkit-based browsers to still resize text when using the zoom function while still preserving your original font size.
This issue is arising only in modern browsers like safari, opera with iPhone device.
Solution is
Append this style with the -webkit-text-size-adjust: 100%; or -webkit-text-size-adjust: none; with required class it works fine.
Example:
I want the condition to be applied only when request comes from mobile. So I have appended the complete navigation path that full fills my requirement.
.mobile-phone .authenticated-page.authenticated.mobile-community.mobile-document .notification .notification-dialog.content-frame
{
-webkit-text-size-adjust: none;
}
or
.mobile-phone .authenticated-page.authenticated.mobile-community.mobile-document .notification .notification-dialog.content-frame {
-webkit-text-size-adjust: 100%;
}
both will work fine. No need to apply the styles for complete body
The font-size property on iphone landscape seems larger?
Include this to your site:
body {
-webkit-text-size-adjust: none;
}
positioning and font size issues on iPhone Safari
I figured it out:
Top left logo
The logo not showing up was due to a strange non-cascading issue. The logo is an <img>
tab inside an <a id="portal-logo" ...>
. The #portal-logo
has a display: inline-block;
rule in the next-to-last stylesheet that applies to it, but not in the last one. In other words, this is what we have:
#portal-logo { /* in the last CSS file */
margin-bottom: 0;
}
#portal-logo { /* in the next-to-last CSS file */
display: inline-block;
margin: 1.375em 0;
}
Adding display: inline-block;
to the last stylesheet magically makes the logo appear. Then I had to also fiddle with margin
s, position
, top
, etc to make it appear in the right place, but all these are in a CSS file that is loaded conditionally only on mobile browsers, so it's ok. It's just really strange that Safari on iOS does not cascade the display: inline-block;
style!
Search box
I made the search box be rendered in the proper place by adding text-align:right;
to its container, even though an earlier rule for the same container with text-align:left;
makes it work just fine in every other browser.
Slogan
The slogan required the most tweaking. It's contained in a <div id="slogan">
. Here is the old rule:
#slogan {
color: #EE3524;
float: right;
font-size: 110%;
font-weight: bold;
margin-right: -190px;
padding-top: 60px;
position: relative;
z-index: 1;
}
And here is the new rule that works on mobile safari:
#slogan {
-webkit-text-size-adjust: 100%;
clear:right;
color:#ee3524;
font-size:17.6px;
font-weight: bold;
float:right;
margin-right:0px;
padding-bottom:50px;
padding-top:0px;
position:relative;
text-align:right;
z-index:1;
}
One of the key differences is the absolute font-size
in px, instead of as a % value.
Menu Items font
Likewise, specifying the font-size
in px instead of % seemed to be the key here:
Old:
#portal-globalnav li a {
background-color: transparent;
color: #FFFFFF;
font-size: 1.2em;
font-weight: bold;
min-width: 3em;
padding-bottom: 11px;
}
New:
#portal-globalnav li a {
background-color:transparent;
color:#fff;
font-size:15.4px;
font-weight:bold;
padding-bottom:11px;
min-width:3em;
}
YMMV!
Related Topics
Wait For Fonts to Load Before Rendering Web Page
How to Delay a :Hover Effect in Css
Difference Between Background and Background-Color
Svg Use Element and :Hover Style
Why Doesn't the Selector H3:Nth-Child(1):Contains('A') Work
Simulating Transform-Origin Using Translate
Using Rails 3.1 Assets Pipeline to Conditionally Use Certain Css
Css - Overflow: Scroll; - Always Show Vertical Scroll Bar
How to Draw a Circle Sector in Css
How to Build a 2 Column (Fixed - Fluid) Layout With Twitter Bootstrap
Bootstrap 3 - Disable Navbar Collapse
How to Make Internet Explorer 8 to Support Nth Child() CSS Element
Bootstrap Icons Are Loaded Locally But Not When Online
Bootstrap Dropdowns Menus Appearing Behind Other Elements - IE7
Vertical-Align Aligns Everything Else Except Self
Ampersand (&) at the End, and Part of, a Selector in SASS