I’m seeing some odd behavior in Android 4.1 (using the emulator). It
seems that all
and some
tags are rendering too narrow and all
at the same width, as far as I can tell. I’ve seen this occasionally
with inline layouts in desktop browsers and usually floating an element
or defining a child element width fixes it. Not here (so far).
Everything renders great on iPhone and iPad.
I’m using @media queries to target phones:
/* !Begin @media Smartphones (portrait and landscape) */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* !End @media Smartphones (portrait and landscape) */
Out of curiosity I tried adding { width: 100%; } to some of the affected
elements via the above query but on Android it has no effect, though I
can further reduce the width (no help), though the changes are picked up
by iOS. Clearly there’s some overriding CSS that’s affecting width but
I’ve been unable to find it. I thought perhaps it was my ‘reset’ CSS
which I disabled with no effect. I’ve searched online for Android
related bugs but couldn’t find anything so it appears this is ‘operator
error’, though the emulator seems a bit inconsistent in its rendering
which makes it more difficult to pin down the cause.
Anyone have issues with Android? [Laughs] “Design” issues, not personal. ; )
I’ve never tried the Android emulator, but I have heard evil things about it on Twitter and elsewhere. Like don’t trust what you see there, even a little. If you have an Android device, see if the problem travels there. Also see if it is font-specific on the emulator.
Walter
On Sep 3, 2012, at 9:09 PM, Todd wrote:
I’m seeing some odd behavior in Android 4.1 (using the emulator). It seems that all
and some
tags are rendering too narrow and all at the same width, as far as I can tell. I’ve seen this occasionally with inline layouts in desktop browsers and usually floating an element or defining a child element width fixes it. Not here (so far). Everything renders great on iPhone and iPad.
I’m using @media queries to target phones:
/* !Begin @media Smartphones (portrait and landscape) */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* !End @media Smartphones (portrait and landscape) */
Out of curiosity I tried adding { width: 100%; } to some of the affected elements via the above query but on Android it has no effect, though I can further reduce the width (no help), though the changes are picked up by iOS. Clearly there’s some overriding CSS that’s affecting width but I’ve been unable to find it. I thought perhaps it was my ‘reset’ CSS which I disabled with no effect. I’ve searched online for Android related bugs but couldn’t find anything so it appears this is ‘operator error’, though the emulator seems a bit inconsistent in its rendering which makes it more difficult to pin down the cause.
Anyone have issues with Android? [Laughs] “Design” issues, not personal. ; )
Well, that doesn’t exactly inspire confidence. I don’t have an Android device either. Ok, well, I’m not going to worry about it then, the site still functions, it just doesn’t look as pretty as it could. Kind of like me.
Todd
On Sep 3, 2012, at 8:17 PM, Walter Lee Davis email@hidden wrote:
I’ve never tried the Android emulator, but I have heard evil things about it on Twitter and elsewhere. Like don’t trust what you see there, even a little.