翻译I'm having trouble getting my mobile web app to render properly on my iPhone 4. According to Wikipedia, the iPhone 4 has 960 width x 680 height pixels and the other iPhones have something like 480 width x 340 pixels.
With my current build, the images and CSS styling look really tiny on the iPhone 4.
Here is my code:
<!DOCTYPE html> <html> <head> <title>mobile</title> <link rel="stylesheet" type="text/css" href="iphone.css" media="only screen and (max-width: 480px)" /> <link rel='stylesheet' href='highRes.css' media='only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)' /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="explorer.css" media="all" /> <![endif]--> </head> <body> <div class="nav"> <div id="threeButtons"> <div class="navButton" id="friends"> Friends </div> <div class="navButton" id="nearby"> Nearby </div> <div class="navButton" id="me"> Me </div> </div> <div id="settingsButton"> </div> </div> </body> </html>And here is my CSS:
body { background-color: #ddd; /* Background color */ color: #222; /* Foreground color used for text */ font-family: "Lucida Grand"; font-size: 14px; margin: 0; /* Amount of negative space around the outside of the body */ padding: 0; /* Amount of negative space around the inside of the body */ display: block;}
div.nav { text-shadow: 0px 1px 0px #fff; background-image: -webkit-gradient(linear, left top, left bottom, from(#e1f7ff), to(#a1d2ed)); height: 50px; } #threeButtons { float: left; margin-left: 20px; margin-top: 10px; margin-bottom: 5px; } div.navButton { float: left; height: 30px; font-weight: bold; text-align: center; color: white; text-shadow: rgba(0,0,0,0.6) 0px -1px 0px; line-height: 28px; border-width: 0 8px 0 8px; -webkit-border-image: url(images/button.png) 0 8 0 8; } #settingsButton { float: left; background-image: url('images/settings.png'); height: 30px; width: 29px; margin: 10px 0 5px 60px; }Does anyone have an explanation on how to build for the iphone 4? Should I use these media parameters to reference the CSS:
<link rel="stylesheet" type="text/css" href="iphone.css" media="only screen and (max-width: 480px)" /> <link rel='stylesheet' href='highRes.css' media='only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)' />or should I hardcode the body pixel width in the CSS?
I just checked out this article: http://menacingcloud.com/?c=highPixelDensityDisplays
but I want to hear what other people have done.