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
}

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效