視網膜上的HTML和CSS顯示錯誤2800x2000

我在大型視網膜顯示器上顯示我的網站時出現問題。在桌面設備和移動設備上運行良好，但在MacBook視網膜屏幕上，它看起來很大，並且不適合瀏覽器。有沒有辦法讓.container看起來相同的寬度和高度，並在所有設備和所有屏幕（）上左上浮動？視網膜上的HTML和CSS顯示錯誤2800x2000

<body> <div class="container"> <nav> </nav> </div> </body>

這裏是網站：www.pctutorials.16mb.com

下面是代碼：

所有的

* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    line-height: 0; 
} 

html { 
    height: 100%; 
} 

body { 
    width: 100%; 
    height: 100%; 
    position: relative; 
    float: left; 
    -webkit-text-size-adjust:100%; 
    -ms-text-size-adjust:none; 
} 

p { 
    font-family: Arial, sans-serif; 
    font-size: 13px; 
    line-height: normal; 
    color: white; 
} 

.container { 
    width: 2000px; 
    height: 1080px; 
    position: relative; 
    float: left; 
    overflow: hidden; 
    background: url("images/background.jpg") no-repeat top left; 
    background-size: 2000px 1080px; 
}

來源

2015-06-17 Roba Konarskis

歡迎來到Stack Overflow。你能爲我們提供HTML代碼的基本結構嗎？ – Dinei

這裏是網站：www.pctutorials.16mb.com –

您可以編輯的問題，在這個問題本身添加相關的html代碼？ – Ravimallya

首先，你設置的width和height.container固定值。 nav元素也一樣。

這就是爲什麼你的網頁不適合在MacBook（和幾乎所有其他的筆記本電腦，視網膜或不，太）。

爲了解決這個問題，我會下手：

.container { 
    width: 100%; 
    height: 100%; 
    ... 
}

和

nav { 
    height: 100%; 
    ... 
}

然後，你需要玩是.nav-menu這可能是在小屏幕上切斷。令人遺憾的是，如果沒有媒體查詢一點點的處理，你就無法解決這個問題。

來源

2015-06-17 19:54:44

謝謝你。用@media查詢玩了一下，但沒有得到任何體面的結果。它仍然顯示可怕。 –

視網膜上的HTML和CSS顯示錯誤2800x2000

回答

相關問題