Question

我最近开始使用响应式网页设计，并在此进行了基本测试：

http://test.studev.net/

它在桌面浏览器中运行良好但是我在加载到高分辨率设备（例如iPhone上的视网膜显示器）时如何处理最小宽度设计时有点困惑。由于这种类型的显示器意味着例如尺寸为16px，这在桌面上阅读是正常的，因此无法在iPhone 4/5上阅读。

这通常如何处理？

Answer 1

如果你想让手机上的文字更小或更大，你就可以

@media screen and (max-width: 480px) {
    font-size: 10px; /* Smaller */
}

或

@media screen and (max-width: 480px) {
    font-size: 20px; /*Larger*/
}

并确保在<HEAD>标记中包含此内容：

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

或者你也可以像这样禁用缩放：

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

对于IE10支持，请尝试：

@-ms-viewport{
    width:device-width
}

Answer 2

您可以根据屏幕宽度选择字体大小：

    /* Large desktop */
    @media (min-width: 1200px) {
        font-size: 18px;
    }

    /* Portrait tablet to landscape and desktop */
    @media (min-width: 768px) and (max-width: 979px) {
        font-size: 16px;
    }

    /* Landscape phone to portrait tablet */
    @media (max-width: 767px) {
        font-size: 14px;
    }

    /* Landscape phones and down */
    @media (max-width: 480px) {
        font-size: 12px;
    }

要确保您的布局在移动设备屏幕上拉伸，您必须使用视口元标记：

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

此元标记需要位于head标记内。 “设备宽度”将是您的屏幕可以显示的最大像素。你也可以在那里设置一个常数值（600px）。

initial-scale = 1表示它会自动缩放到100％。（0.5 => 50％）

响应式网页设计和高分辨率显示器（iPhone 4/5）

2 个答案: