css – 响应式网页设计和高分辨率显示(iPhone 4/5)

我最近开始用反应灵敏的网页设计,并在这里做了一个基本的测试：

http://test.studev.net/

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

这通常如何处理？

解决方法

如果你想要使移动或更大的文字更小的文字,你可以做

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

原文地址：https://www.jb51.cc/css/216895.html