iPhone 4移動網絡應用像素縮放問題

我無法讓我的移動網絡應用在我的iPhone 4上正常呈現。根據維基百科，iPhone 4具有960寬x 680高像素，其他iPhone有類似480寬x 340像素。iPhone 4移動網絡應用像素縮放問題

用我的當前版本，圖像和CSS樣式的外觀上iPhone 4

這裏真的很小是我的代碼：

<!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>

這裏是我的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; 
    }

有沒有人有解釋如何爲iphone 4構建？我應該使用這些媒體參數引用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)' />

，或者我應該硬編碼在CSS身體像素寬度？

我剛剛簽出的這篇文章：http://menacingcloud.com/?c=highPixelDensityDisplays

但我想聽聽其他人做。

來源

2010-08-10 Sachin

試試這個<meta>標籤

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

來源

2010-08-10 23:35:37 Marko

iPhone 4移動網絡應用像素縮放問題

回答

相關問題