PDAs and phones have a wide variety of rendering engines. It is best to view your page(s) directly in the machine in question. Opera has a small screen rendering engine that simulates/is-the-same-as their cell version of Opera. [shift][f11] In Firefox's developer's extension, miscellaneous=>small screen rendering. Use these tools with and without images enabled for best results. You can also convert your html to wml/wap with a tool like html2wml. Being a PERL script, it should be trivial to convert on the fly for those UAs that accept .wml. Here is this 2 column layout demo rewritten as .wml <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN" "http://www.wapforum.org/DTD/wml12.dtd"> <wml> <card title="2 Column - Apparent Equal Height"><p><big><strong>2 Column—Apparent Equal Height</strong></big></p> <p><big>Menu</big></p> <p><a href="#">menu item</a></p> <p><a href="#">menu item</a></p> <p><a href="#">menu item</a></p> <p><a href="#">menu item</a></p> <p>The background image in #wrapper extends the full length of the page. So, it looks like the column is full length.</p> <p><big>Main Content</big></p> <p>The borders are set to overlap. If you know which column will always be the longer, you may use only that column's border. If you use color to separate the columns, the background image in #wrapper should be total width of the float column. Like the overlapping borders, this makes it appear that both columns are full length.</p> <p>This demo has been modified to include an actual background image. I have also lengthened the content to more clearly show that the navcol <em>seems</em> to extend the full height of the content.</p> <p>Aliquam odio wisi, molestie quis, hendrerit non, tempus ut, felis. Sed a augue. Fusce metus justo, faucibus in, sagittis dignissim, porttitor id, risus. Praesent sit amet velit. Aliquam erat volutpat. Pellentesque ut diam. Nam venenatis, metus sed scelerisque semper, tellus libero placerat tellus, vel aliquam risus lorem sed dui. Cras lacus. Nullam venenatis adipiscing neque. Maecenas et metus nec libero vehicula congue. Vestibulum vestibulum odio ullamcorper lacus. Etiam odio eros, aliquet et, volutpat eu, porta laoreet, orci. Donec sodales massa tincidunt est.</p> <p align="right"><do type="prev" label="[<<]"><prev/></do><do type="accept" label="[>>]"><go href="#wdf001"/></do></p> </card> <card title="2 Column - Apparent Equal Height" id="wdf001"> <p>Footer Stuff ©2005</p> <p><a href="./">Return to index</a></p> <p><a href="#wrapper">Return to top of page</a></p> <p align="right"><do type="prev" label="[<<]"><prev/></do></p></card> </wml> Code (markup): cheers, gary
None that I know of. I have seen the question asked many times. The closest I have managed to come is to put your entire page into a table that matches the screen resolution you are shooting for. Keep in mind that all scripts have to be disabled. The little critters can't handle them. I started working on this and got distracted. If you vist my site using a PDA you will automaticlly go to this page but you should view in in a browser to get some concept of the space you have to work with. As I recall at this time the page above was one screen full on an AXIM. Scrolling with the pen is a major PITA so you almost need to go with long tall pages to be user friendly IMO. The redirection to the pda directory is accomplished with a JS.
I've found wapsilon to do a reasonably adequate job. http://wapsilon.com/ like i said... reasonably adequate. not good, but not completely screwed up either - i did get pages to display, but in the real world they definitely look different from phone to phone so this is marginal at best. But it's a start. VG
Both the OpenWave Mobile SDK and the Nokia Mobile Internet Toolkit include WAP Browser simulators so you can preview what your page will look like on mobile phones (not sure about PDA's though). You can also read this article from O'Reilly which has a lot of good information about WAP/WML programming... Creating Web Content for Mobile Phone Browsers