Question

我首先考虑使用移动设备构建我的网站，因为我计划使用流畅/响应式布局，然后构建更大的桌面。

我确定它很容易解决，但我已经开始用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;
    }

Answer 1

iPhone通常缩小页面以适应屏幕。要在iPhone和大多数其他智能手机上停止此行为，您需要在页面的头部包含以下内容：

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

您可能需要对代码进行其他添加，但请从此开始，看看是否有帮助。

祝你好运！

首先建立我的网站移动，与视网膜显示问题

1 个答案: