iui Compatibility with iPad

[GoogleCodeExporter]

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.

Original issue reported on code.google.com by GRWi...@gmail.com on 20 Mar 2010 at 6:21

• Merged into: #345

[GoogleCodeExporter]

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

Original comment by msgilli...@gmail.com on 22 Mar 2010 at 9:41

• Changed state: Accepted
• Added labels: ****
• Removed labels: ****

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

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.

Original comment by GRWi...@gmail.com on 23 Mar 2010 at 12:23

• Added labels: ****
• Removed labels: ****

[GoogleCodeExporter]

Original comment by msgilli...@gmail.com on 22 Jul 2012 at 9:20

• Changed state: Duplicate
• Added labels: ****
• Removed labels: ****