iOS 4.2: HTML rendering within app

Get Started | Login

Discussion Forums > Uncategorized

Replies: 2 Views: 700

rpwiki Aspiring developer Posts: 25 Reg: Jun 03, 2011 Requa, CA 250	confirm \| cancel 06/08/11 12:03 PM (14 years ago) iOS 4.2: HTML rendering within app OK, my next problem... I've created a html page within my app (i.e. selecting row item x opens up an HTML page - not a custom HTML page). My problem is that I have two sets of text where the font sizes are BOTH set at 36px; but the simulator seems to render them at different sizes? It should render them both the same? Testing in several browsers looks fine, but the app itself doesn't seem to like it. I am wondering whether there is something about px that iOS has challenges with? For instance, the screen width is 320 px (for argument's sake). My if I create a .jpg at 200px it looks incredibly small on my iPhone simulator. Bumping the size up to 600px seems to improve things, but doesn't make a lot of sense. I'm about to test it on an actual phone and my iPad to see if this is a real problem, but it seems I am missing something about how iOS renders HTML to make it fit the screen. HTML is below. Please ignore the horrible coding. This is simply for testing :-): <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=UTF-8 /> <title>Untitled Document</title> <style type=text/css> <!-- .List { font-family: Arial, Helvetica, sans-serif; font-size: 34px; font-style: normal; line-height: 1.2em; font-weight: normal; color: #668033; list-style-type: square; padding-left: 20px; text-transform: uppercase; } .BodyText { font-family: Georgia, Times New Roman, Times, serif; font-size: 34px; line-height: 1.5em; color: #000000; margin-top: 40px; margin-right: 30px; margin-bottom: 40px; margin-left: 20px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; } #header { border-top-style: solid; border-right-style: none; border-bottom-style: solid; border-left-style: none; border-top-color: #666666; border-right-color: #666666; border-bottom-color: #666666; border-left-color: #666666; margin-top: 40px; padding-bottom: 10px; background-color:#FFFFFF; } #bodyHeader{ background-color:#FFFFFF; font-size:34px; } --> </style> </head> <body> <div style=margin-bottom: 40px; margin-top: 30px; text-align:center; background-color:#668033; padding-top:20px; width:auto><img src=camping.png width=600/></div> <div id=header> <ul style=font-size:34px;> <li class=List><strong>Location:</strong><span style=font-family:Georgia, 'Times New Roman', Times, serif; color:#000000; text-transform:none;> Jedediah Smith State Park</span></li> <li class=List><strong>Mileage:</strong><span style=font-family:Georgia, 'Times New Roman', Times, serif; color:#000000; text-transform:none;> 0.5mi \| 0.8km</span></li> <li class=List><strong>Time: </strong><span style=font-family:Georgia, 'Times New Roman', Times, serif; color:#000000; text-transform:none;> 30mins</span></li> <li class=List><strong>Trailhead:</strong><span style=font-family:Georgia, 'Times New Roman', Times, serif; color:#000000; text-transform:none;> Year 'round take Howland Hill Road to the marked parking area. In the summer cross the footbridge from the Jedediah Smith campground and take the left fork trail.</span></li> <li class=List><strong>Difficulty:</strong><span style=font-family:Georgia, 'Times New Roman', Times, serif; color:#000000; text-transform:none;>Easy</span></li> </ul> </div> <div id=bodyHeader> <p class=BodyText>Niamet irit at. Em nonsequisis nos nos acil inisl in vullamconsed tet inci etum zzrillan ute magna feuiscil dolorper adipit landiamcor autet, suscipsum quiscilit acilissi. Patie conse dolesse dolorpero dip eu feum dolor iustrud magna consed min volorperilit aliscilis acipiscidunt nis am quam zzriliquat. Ut prat veliquam eu feum velisl ullamco mmodigna faccum zzrit, commy nullaortis ad ea aliqui blandio od tet ut veniamcLiquisi. Idunt augiam, quipisi. Elenisi el ut non ut acidunt vel utpatum qui tatetue dip ercil utpat. To conum augiam do do ea conum autet dip ero dolut at. Ut volore feum do dolent et acin henit vullamcommy niamcon sequatue magna ad modolesto do corpera estismolor augait amconse quipit venibh </p> </div> </body> </html> Title Comments OK, my next problem... I've created a html page within my app (i.e. selecting row item x opens up an HTML page - not a custom HTML page). My problem is that I have two sets of text where the font sizes are BOTH set at 36px; but the simulator seems to render them at different sizes? It should render them both the same? Testing in several browsers looks fine, but the app itself doesn't seem to like it. I am wondering whether there is something about px that iOS has challenges with? For instance, the screen width is 320 px (for argument's sake). My if I create a .jpg at 200px it looks incredibly small on my iPhone simulator. Bumping the size up to 600px seems to improve things, but doesn't make a lot of sense. I'm about to test it on an actual phone and my iPad to see if this is a real problem, but it seems I am missing something about how iOS renders HTML to make it fit the screen. HTML is below. Please ignore the horrible coding. This is simply for testing :-): <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=UTF-8 /> <title>Untitled Document</title> <style type=text/css> <!-- .List { font-family: Arial, Helvetica, sans-serif; font-size: 34px; font-style: normal; line-height: 1.2em; font-weight: normal; color: #668033; list-style-type: square; padding-left: 20px; text-transform: uppercase; } .BodyText { font-family: Georgia, Times New Roman, Times, serif; font-size: 34px; line-height: 1.5em; color: #000000; margin-top: 40px; margin-right: 30px; margin-bottom: 40px; margin-left: 20px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; } #header { border-top-style: solid; border-right-style: none; border-bottom-style: solid; border-left-style: none; border-top-color: #666666; border-right-color: #666666; border-bottom-color: #666666; border-left-color: #666666; margin-top: 40px; padding-bottom: 10px; background-color:#FFFFFF; } #bodyHeader{ background-color:#FFFFFF; font-size:34px; } --> </style> </head> <body> <div style=margin-bottom: 40px; margin-top: 30px; text-align:center; background-color:#668033; padding-top:20px; width:auto><img src=camping.png width=600/></div> <div id=header> <ul style=font-size:34px;> <li class=List><strong>Location:</strong><span style=font-family:Georgia, 'Times New Roman', Times, serif; color:#000000; text-transform:none;> Jedediah Smith State Park</span></li> <li class=List><strong>Mileage:</strong><span style=font-family:Georgia, 'Times New Roman', Times, serif; color:#000000; text-transform:none;> 0.5mi \| 0.8km</span></li> <li class=List><strong>Time: </strong><span style=font-family:Georgia, 'Times New Roman', Times, serif; color:#000000; text-transform:none;> 30mins</span></li> <li class=List><strong>Trailhead:</strong><span style=font-family:Georgia, 'Times New Roman', Times, serif; color:#000000; text-transform:none;> Year 'round take Howland Hill Road to the marked parking area. In the summer cross the footbridge from the Jedediah Smith campground and take the left fork trail.</span></li> <li class=List><strong>Difficulty:</strong><span style=font-family:Georgia, 'Times New Roman', Times, serif; color:#000000; text-transform:none;>Easy</span></li> </ul> </div> <div id=bodyHeader> <p class=BodyText>Niamet irit at. Em nonsequisis nos nos acil inisl in vullamconsed tet inci etum zzrillan ute magna feuiscil dolorper adipit landiamcor autet, suscipsum quiscilit acilissi. Patie conse dolesse dolorpero dip eu feum dolor iustrud magna consed min volorperilit aliscilis acipiscidunt nis am quam zzriliquat. Ut prat veliquam eu feum velisl ullamco mmodigna faccum zzrit, commy nullaortis ad ea aliqui blandio od tet ut veniamcLiquisi. Idunt augiam, quipisi. Elenisi el ut non ut acidunt vel utpatum qui tatetue dip ercil utpat. To conum augiam do do ea conum autet dip ero dolut at. Ut volore feum do dolent et acin henit vullamcommy niamcon sequatue magna ad modolesto do corpera estismolor augait amconse quipit venibh </p> </div> </body> </html>

David @ buzztouch buzztouch Evangelist Posts: 6866 Reg: Jan 01, 2010 Monterey, CA 78,840	06/08/11 12:30 PM (14 years ago) Ah, the finer things in life. Experiement with the iPhone 4 and iPhone 3 and iPad simulators. I don't think it will look different but lets make sure. Your device is a best test but does take a little longer. I don't have any secrets about Mobile Safari HTML but Google may help? Could be all sorts of meta-tags you could use to pixel-push. Comments Ah, the finer things in life. Experiement with the iPhone 4 and iPhone 3 and iPad simulators. I don't think it will look different but lets make sure. Your device is a best test but does take a little longer. I don't have any secrets about Mobile Safari HTML but Google may help? Could be all sorts of meta-tags you could use to pixel-push.

bobology I hate code! Posts: 61 Reg: Feb 05, 2011 Los Angeles, CA 1,510	06/08/11 03:23 PM (14 years ago) The simulators don't do a good job of what it actually will look like on an iPhone4 and resemble a 3 more closely. Try installing the app on your device to see how it looks on the retina display. Apple uses a convention for retina graphics that uses [email protected] and filename.png (for lower resolution) to identify a retina higher resolution file. Also mobile safaru doesn't support ALL CSS , there are some exceptions and you should check the developing for mobile safari developer or in dashcode to see if all of your CSS classes are supported. That could be the case with your image sizing. Comments The simulators don't do a good job of what it actually will look like on an iPhone4 and resemble a 3 more closely. Try installing the app on your device to see how it looks on the retina display. Apple uses a convention for retina graphics that uses filename@2x.png and filename.png (for lower resolution) to identify a retina higher resolution file. Also mobile safaru doesn't support ALL CSS , there are some exceptions and you should check the developing for mobile safari developer or in dashcode to see if all of your CSS classes are supported. That could be the case with your image sizing.

Login + Screen Name Required to Post Login to participate so you can start earning points. Once you're logged in (and have a screen name entered in your profile), you can subscribe to topics, follow users, and start learning how to make apps like the pros.