Thats really cool and I hope to design an iphone version of the site in the future but I was hoping for a way to get my page to appear properly in its normal site view. Right now some things kinda go out of whack and I'm not understanding why. Example is even the links at the bottom of the page seem to be expanded etc.
Any help would be appreciated.
Incase anybody is wondering why I want the full version to look right in the iphone here is my logic.
I'm an avid iphone user and for me personally I can't stand iphone versions of sites. To me one of the whole selling point behind the iphone was the fact that you get a real browser compared to mini browsers and such. On every site I go to there is two versions. First the iphone version and then you have the option at the bottom of the page to switch to the full version where you can do your pinching and zooming if thats what you prefer. Because I want the best user experience I'm going to do both to accommodate everybody's preferences but before I start building an iphone version of the site I want to build my normal version. I want the normal version to look correct on all the browsers including the iphone now before I go on to code more pages. Lastly, lets not forget that the ipad will be shipping very soon. Its gonna have the same version of safari as the iphone I believe so its important to get the site looking semi-correct on the iphone to be sure it looks correct on the ipad because I doubt that ipad users will want mobile versions of sites... : )
This is a little like closing the barn door AFTER the horses have fled. If you wanted an iPhone/iTouch/iPad friendly site, you should have used ems or % instead of pixels. All is not lost though as you can create a separate stylesheet for mobile devices and give people a choice. The following live demo uses changesheet.js. View source code for details.
I only have the one homepage semi-done right now. Can't I go back and use a px>ems converter and change all my px's to the corresponding ems #? If I go through that effort then should my site look totally correct on the iphone just as it does on the computer safari? Where people will have to pinch and zoom to see anything but it will display the same as computer just at alot smaller of resolution?
If you want a site that performs well on desktop, laptop, iPhone, iTouch and iPad (which provides horizontal or vertical display), I think you need to start with an appropriate Liquid Layout in %.
Before you re-build your page, build a test page using one of the layouts from above and test it in your iPhone.
I was kinda hoping that I could just convert my values to ems and it would work. Remember I'm very new to CSS/HTML so if what I'm saying is impossible be forgiving as I don't know what I'm talking about...LOL.
So out of luck then?
I don't have an iPhone, so you're asking the wrong person.
You'll learn a lot more experimenting on your own. Try one of the em based layouts from the link I gave you and see how it works in your iPhone. Nothing ventured, nothing gained.
What, you can't go buy an iphone just to help me with this?
ok, I'll play around. I didn't know if there was a standard rule or something for how to setup the properties to work with the iphone. Experimentation sounds like the best bet then.
Its lame since they act like its a full blown safari just minus flash when really its a mobile web browser and you have to code things right to get it to work with it AND safari. I always thought if it works in safari it's supposed to work on the iphone safari but I guess I was stupid for thinking that...LOL.