I'd just discovered that Apple approved Opera Mini browser for iPhone/iPod
(maybe only available for US Apple Store as of now).
This is the first time I ever have a firsthand experience browsing web via OM,
so I am not sure if some of the behaviors I saw only apply to Apple mobile
devices.
A brief explanation on the page that I tested.
(a) a style sheet for all media
#container {max-width: 40em;min-width: 240px;margin: 10px;}
(b) A style sheet for media queries targeting iPhone, Andriod and I thought OM
too
- Special treatment for floated columns to prevent the same classes in the
handheld file taking over.
(c) A handheld style sheet for older devices
#container {80%} <-- my thought is iPhone, Andriod picked up this and ignored
max/min-widths in (a), I thought OM should do that too, but it doesn't and this
is the reason I was seeing below behaviors.
Max-width/min-width declared but not width in (a):
OM doesn't treat Table elements well, at first I thought it was because the
online emulator doesn't accurately reflect the actual rendering (this is before
I found out OM for iPhone), but browsing from iPod, I am seeing the same
behavior. If width is declared in (a), it will take the width based on the
total given width (width + paddings + margins) of the #container, and ignores
the second div (intend to serve as a wrapper for table just for testing
purpose), so if a layout is 2 columns floated, the table overlaps the right
column, and from a rough estimation, I believe it inherits the #container {80%}
in (c) + 10px margin right in (a).
Whether a second div is given or not, OM ignores the width declared if the
table's width is smaller than the given width of outer div, but if the width is
wider than the given width of #container, it doesn't ignore. This behavior
however does not applied to horizontal view though, my guess is it takes the
max-width instead.
Max-width/min-width (in (a)), width declared (in (b)):
The same behavior existed if pixel is used in Width (never mind if it's larger
or smaller than the width declared in #container). With em unit, the behavior
is gone if the width value is same as max-width, if the width smaller even just
0.5em, the same rendering comes back.
I see that max/min widths are the supported properties in CSS Mobile Profile
2.0 so is table elements for XHTML Basic 1.1, it's rather bizarre for OM to
behavior like that.
http://www.w3.org/TR/css-mobile/
http://www.w3.org/2007/07/xhtml-basic-ref.html#elem_table
Also, If pixel value is used for width, OM loses zooming capability, is it
because in other mobile devices, they don't have zooming feature?
Devices that is 220px or wider from Adobe Device Central all rendered the table
correctly, but then I have no knowledge if I can even trust what I see from
those emulators. I have CS3, so the devices rendered in ADC CS3 may not be as
up to date as the CS4 or CS5.
In regard to the poor support of table for mobile devices in general, what do
you think about the tabular data? I would love to hear what you guys think. My
thought is that there are data that are best served in tabular format and from
semantical point of view we should never treat tabular data differently just
for the sake of supporting mobile devices.
tee
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
*******************************************************************
