HTML & CSS 在 Retina 2800x2000 上显示错误答案

【问题标题】：HTML & CSS displays wrong on Retina 2800x2000HTML & CSS 在 Retina 2800x2000 上显示错误
【发布时间】：2015-09-03 05:20:21
【问题描述】：

我在大型 Retina 显示器上显示我的网站时遇到问题。在台式机和移动设备上运行良好，但在 MacBook 视网膜屏幕上它看起来很大并且不适合浏览器。有没有办法让 .container 在所有设备和所有屏幕上看起来都具有相同的宽度和高度并在左上方浮动（）？

<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;
}

【问题讨论】：

欢迎来到 Stack Overflow。您能否也向我们提供您的 HTML 代码的基本结构？
这里是网站：www.pctutorials.16mb.com
您可以编辑问题并在问题本身中添加相关的html代码吗？

标签： html css responsive-design cross-browser retina

【解决方案1】：

首先，您将.container 设置为width 和height 的固定值。 nav 元素也是如此。

这就是为什么您的网页不适合 MacBook（以及几乎所有其他笔记本电脑，视网膜与否）。

要解决这个问题，我将从：

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

和

nav {
    height: 100%;
    ...
}

然后，您需要使用.nav-menu，它可能会在较小的屏幕上被截断。可悲的是，如果不玩一点媒体查询，就无法解决这个问题。

【讨论】：

谢谢。玩了一会儿@media 查询，但没有得到任何体面的结果。它仍然显示很糟糕。