Issue 233 in iui: iui Compatibility with iPad

[i...@googlecode.com]

Status: New
Owner: ----

New issue 233 by GRWilde: iui Compatibility with iPad
http://code.google.com/p/iui/issues/detail?id=233

iui.css needs some changes to produce good looking results on an iPad. The
main change I noted in
running on the iPad Simulator is that .toolbar > h1 { } does not make good
use of the available
toolbar space on the iPad. I modified the settings of .toolbar > h1 {
left: 40% and width: 300px }
and it seems to give good iPad Simulator results for me, but I am still
experimenting with various
settings. This setting seems to center the toolbar text on the iPad and
permits longer titles without
an overflow ellipsis. Right now I have two separate versions of iui.css,
the standard version and the
modified version selected by platform as outlined in Apple's Safari Web
Content Guide. Other than
this change my Web Apps run fine and look good on the iPhone Simulator. It
should be fairly easy
to detect the platform in iui.css and provide the appropriate css for the
iPad and the iPhone/iPod
Touch so that we only need one version of iui.css.

--
You received this message because you are listed in the owner
or CC fields of this issue, or because you starred this issue.
You may adjust your issue notification preferences at:
http://code.google.com/hosting/settings

[i...@googlecode.com]

Updates:
Status: Accepted

Comment #1 on issue 233 by msgilli...@gmail.com: iui Compatibility with iPad
http://code.google.com/p/iui/issues/detail?id=233

Would you post your solution here? I'd like to see it. You're using
conditional CSS to select by platform?

[i...@googlecode.com]

Comment #2 on issue 233 by msgilli...@gmail.com: iui Compatibility with iPad

[i...@googlecode.com]

Comment #3 on issue 233 by GRWilde: iui Compatibility with iPad
http://code.google.com/p/iui/issues/detail?id=233

I am using the following header code which is consistent with Apple's
current recommendations. I have two
different versions of iui.css, one an unchanged 0.31 version of iui.css,
and one a 0.31 version with the minor
iPad changes mentioned above, which I named ipad.css. A cleaner solution
might be to have conditional css
tests performed within a single version of iui.css, but I wanted to have a
clean released version of iui to use
with the iPhone/iPod touch. Here is the header code i used:

<meta name="viewport" content="width=device-width; initial-scale=1.0;
maximum-scale=1.0; user-
scalable=0;"/>
<link media="only screen and (max-device-width: 480px)" href="iui/iui.css"
type= "text/css" rel="stylesheet">
<link media="screen and (min-device-width: 481px)" href="iui/ipad.css"
type="text/css" rel="stylesheet">

Obviously Apple believes that the iPad should accommodate a full version of
most Web Sites, but I believe iui
is still a valuable technique to use with the iPad since it incorporates
the touch interfaces that are very useful
with an iPad.

[i...@googlecode.com]

Updates:
Status: Duplicate
Mergedinto: 345

Comment #4 on issue 233 by msgilli...@gmail.com: iui Compatibility with iPad
http://code.google.com/p/iui/issues/detail?id=233

(No comment was entered for this change.)