响应式Web设计和高分辨率显示器（iPhone 4/5） [英] Responsive Web Design and high resolution displays (iPhone 4/5)

问题描述

我最近开始使用响应式网页设计，并在这里做了一个基本的测试：

I have recently started toying around with responsive web design and have done a basic test here:

http://test.studev.net/

它在桌面浏览器中正常工作，但我得到一点困惑在如何处理最小宽度设计时加载在高分辨率设备上，例如iPhones上的视网膜显示器。因为这种类型的显示，这意味着例如尺寸16px，这是正常的读取在桌面上是不可能读取的iPhone 4/5。

It works fine in a desktop browser however I am getting a little confused on how to deal with the smallest width design when loaded on a high resolution device for example retina displays on iPhones. Because of this type of display it means for example size 16px which is normal to read on a desktop is impossible to read on an iPhone 4/5.

这通常处理？

推荐答案

很好地，如果你想让手机上的文字更小或更大，你会做

Well either if you want to make the text smaller on mobile or bigger you would do

@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">

或者您也可以停用缩放：

Or you can also disable zooming like so:

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

并且对于IE10支持，请尝试：

And for IE10 support, try:

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

这篇关于响应式Web设计和高分辨率显示器（iPhone 4/5）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！