0

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

我确信这很容易解决，但我已经开始考虑 iPhone 5 来构建我的主标题，所以它的宽度约为 300 像素。在单列设置中，其他所有内容都将在此下方排列。

我是否需要从媒体查询开始以获得正确适合视网膜显示器的宽度？因为现在，我的标题在我的桌面上看起来不错（300 像素宽），但它并没有填满我的 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;
    }
4

1 回答 1

1

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

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

您可能必须对您的代码进行其他添加，但从这个开始，看看它是否有帮助。

祝你好运！

于 2013-05-08T00:37:39.913 回答