My app contains a UIWebView. When the app rotates from portrait to landscape or back, the font weight appears to slightly change. Both bold text and regular text get slightly bolder in landscape, and slightly thinner in portrait.
This does not appear to be the case in Safari, only in my app. Here is an example image, taken as a screenshot on the iPad. I have rotated and cropped an example section.
alt text http://dl.swankdb.com/font-change-example.png
I have the following CSS configured, but it seems to prevent the drastic font size change, not the subtle weight change that I am observing:
html {
-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}
Can anyone explain this? The simulator does not do it -- but my iPad, iPhone 3GS and iPhone 4 all have it. I've also received reports from customers that it happens to them, so I know it's not in my head!
I've seen this in Safari itself too with a web app I'm putting together. After a day or so of head scratching, and deconstructing the CSS used by the iPad User Guide, I found that
-webkit-transform: translate3d(0,0,0);
does the trick. Googling around it looks like this enables hardware acceleration of rendering which leads to far more consistent results in portrait and landscape orientations.
Well after spending a rediculous amount of time trying to figure this out I have found a solution:
Use this:
html {
-webkit-font-smoothing: none;
}
The reason for this is that only one mode can make use of the subpixels in the display, because they are arranged in a certain direction. The other mode will display the font with greyscaled anti-aliasing and appear slightly different.
Related
When having a look at this site
this:
linebreaks correctly for small screens. It word wraps (adds a line break) for iphone 5c and ipad in landscape mode as well. Which is wrong. The sentence could finish in one line.
The font size seems bigger as well.
The word wrap / linebreak does not happen on my HTC One S in landscape mode.
Is there a tool that can help me figure out these irregularities?
Any idea what this problem is about?
Note: this gets used:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
EDIT I applied a fix on the website, so now I heard it looks fine. The answers given fix the problem (when applying 100% instead of none)
Apple devices (I might think also Chrome on Android devices do this as well) have a really funny way to render text on pages, the font increases in size automatically to retain the same "flow" in both portrait and landscape since it helps the user to do not lose track of the line it's currently reading.
The way to disable entirely the resizing is to use the following CSS rule:
html {
-webkit-text-size-adjust: none;
}
However this behaviour works only on mobile pages which are zoom fixed with the meta tag user-scalable=no and it breaks some desktop browsers while the desktop zooming
What you probably want is to keep the font-size constant through every zoom scale. If you add the following on your CSS, then you'll have what you're looking for.
html {
-webkit-text-size-adjust: 100%;
}
‑webkit‑text‑size‑adjust: 100%
Is the way to do it instead of
‑webkit‑text‑size‑adjust: none
Using none will break user zooming in various browsers.
Here's a good read about the topic: http://blog.55minutes.com/2012/04/iphone-text-resizing/
To build responsive and cross-device websites you can use online tools such as this emulator
However, in text case formatting and layout, a real emulator is needed.
X code can launch IOS sumulator and will give you a way to debug your local/remote website on any apple devices (smartphone and tablets).
By using this software, you will be able to understand/debug and correct your website.
Currently, all browser are more or less managing differently the rotating actions (lanscape<->portrait) and also fonts. So, I won't look exactly the same but your website will be very similar across all browsers.
In your case, first you need to stop all browsers to resize your text on rotation.
Simply add the following CSS code.
CSS
html, p, a {
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
}
By the way, I checked your line break issue. Every thing is working on Iphone 4/5 on Ios 6X and Ios 7X.
But any way, you need in the future to check your website on IOS simulator
Here is a screenshot from safari for an Iphone 5:
What causes the flash of white to the right of a responsive design when changing orientation from portrait to landscape on the iPhone with iOS 6?
Try it on Safari for iOS 6:
Websites like this don't do it: http://html5boilerplate.com
But this one does: http://www.initializr.com
Something to do with re-processing (CPU lag) to fit a wider screen?
It doesn't happen in Chrome for iOS6...
For example, I just removed all img from my own testing site and set the background of <body>, <html> etc. to non-white, but it still happens. This seems to happen with a lot of different websites out there, but others are completely immune to it...
Could it be a problem with someone on the website, or an iOS Safari bug?
Thats because of the elements in the header of http://www.initializr.com/ which (dis)appear when changing orientation. It forces the header to resize and the elements below are pushed down. This causes a repaint of the DOM, that causes the short white flash on iOs.
Our site renders with inconsistent font sizes on mobile Safari -- and as far as we can tell, only Mobile Safari. This very much has stumped us.
We analyzed the site with Firebug, and the incorrect areas are inheriting the right styles, yet the fonts are still rendered with the wrong sizes.
1) Visit http://www.panabee.com.
2) Conduct a search for a domain name.
The boxes on the left side show the incorrect font sizes. The font size should match the font size on the right side (both box titles and box copy). For instance, the titles, "Variations" and "Twitter," are much larger than the title, "Alternate Endings."
Any clue why?
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 use 100% not none 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.
Here's what ultimately worked (tested only on iPhone 4 tho):
/* Mobile browsers only */
#media only screen and (max-device-width: 480px) {
td#main_box { -webkit-text-size-adjust:100% }
}
We awarded the answer to John since his solution was the basis of this one.
Probably not the most elegant answer, but it works.
-webkit-text-size-adjust: none; will cause you to not be able to zoom in mobile devices. You should use 100% instead.
-webkit-text-size-adjust:none;
will probably solve your problem.
target-element { -webkit-text-size-adjust:80% }
will still zoom but keeps it 80% smaller than webkits default.
In my case I had a <p> element and I solved this issue by adding:
width: fit-content;
To it. I was able to reproduce this on Safari mobile as well.
I have fixed font sizes issue by using css hack for IOS app and IOS safari browser.
#supports (-webkit-touch-callout: none) {
//you can write your custom css for IOS safari browser.
}
I've noticed css sprites seem to show 1 more pixel than they should when viewing them on the iphone. My site works perfectly fine on all major desktop browsers on mac and PC. But when I view it on the iphone you can see 1 pixel of the adjacent sprite image.
Anyone encounter this before? Any suggestions on how to cleanly fix this? I know I could just modify all my sprites to have more separation in between them, but is there an easier way?
UPDATE: Tested zooming with safari, and noticed the exact same problem occurs at certain zoom levels on desktop safari
Better late than never:
It's not a bug or a software flaw, it's simple mathematics: the (older) iPhone displays websites at 980px width on a screen that is 320px wide (in portrait mode).
So it's a rounding issue: let's say an element is 50px wide. It is displayed at roughly a third of its size, and that is causing the problem: the iPhone will display it at either 16px or 17px width. Even if it was exactly one third, the problem would remain, and the same applies to various zoom levels, of course.
If it's 16px, you're fine - you have probably noticed that the issue doesn't occur on all your elements. If it's 17px, it means that the element is displayed slightly larger than intended, and the adjacent sprite will show.
I checked apple.om on an iPhone 3G, and even their navigation bar shows some odd little artifacts at the bottom - they're just barely noticeable.
So in theory, it should be enough to add 1px around each sprite. Having to change all these elements is a bummer, but it seems to be the best solution. The problem isn't likely to go away either - the iPhone 4 obviously still scales things down, at least in portrait mode. Not to mention all the other smartphones out there with far inferior screens.
Add another 1px of space between the icons.
.:edit:.
Just noticed that this was one of your proposed solutions. Check the elements with the sprite and make sure that they are the right size. (Double check the rendered border-box model in Firebug).
It could have something to do with how the mobile phone renders items.
When I rotate my iPhone into landscape mode, the iPhone automatically bumps the text size up.
What is the best way to prevent this? I'd like rotation to give the visitor more text to read, not a larger font. Is JavaScript like this the only way to go?
You could use this CSS property
-webkit-text-size-adjust: none;