建立我的網站移動第一，與視網膜顯示問題

我想建立我的網站與移動首先記住，因爲我打算使用流體/響應的佈局，然後建立到較大的桌面。建立我的網站移動第一，與視網膜顯示問題

我確定這是一個簡單的修復方法，但我已經開始使用iPhone 5構建我的主標題，所以它的寬度大約爲300px。其他所有東西都將在一列設置中排在下面。

我是否需要從媒體查詢開始才能在寬視圖中正確顯示寬度？因爲現在，我的桌面看起來不錯（300px寬），但它並沒有填滿我的iPhone屏幕。我意識到需要爲此保存兩組圖像，但我甚至無法獲得一個簡單的頭部以適應。

感謝您的任何建議。

這是我（簡化）代碼：

<html> 
<head> 
</head> 
<body> 
    <div id="centered-wrapper"> 
     <header> 
      <div id="header-logo"> 
       <a href="#"> 
        <img src="image source here" alt="alt text" title="title text"/> 
       </a> 
      </div> 
     </header> 
    </div> 
</body> 
</html> 

html { 
    margin: 0; 
    padding: 0; 
    } 

body { 
    font-size: 100%; 
    margin: 0 auto; 
    } 

#centered-wrapper { 
    position: relative; 
    width: 18.75em; 
    height: 46.875em; 
    margin: 0 auto; 
    } 

header { 
    position: relative; 
    width: 18.75em; 
    height: 18.75em; 
    margin: 0 auto; 
    } 

#header-logo { 
    position: relative; 
    float: left; 
    width: 18.75em; 
    height: 12.25em; 
    margin: 0; 
    padding: .625em 0 0 0; 
    } 

img { 
    max-width: 18.75em; 
    height: auto; 
    }

來源

2013-05-07 tdo-design

iPhone手機通常縮小頁，所以適合在屏幕上。要停止在iPhone這種行爲和其他大多數智能手機，你想在你的頁面頭部以下：

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

您可能必須做出其它添加到您的代碼，但這個開始，看看是否它有助於。

祝你好運！

來源

2013-05-08 00:37:39

感謝大衛，至少在我的iPhone上工作得像一個魅力......。歡呼 – 2013-05-08 00:49:51

這很棒，玩得開心！ – 2013-05-08 10:25:36

建立我的網站移動第一，與視網膜顯示問題

回答

相關問題