响应式网页设计和高分辨率显示器 (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:
它在桌面浏览器中运行良好，但是当加载到高分辨率设备(例如 iPhone 上的视网膜显示器)时，我对如何处理最小宽度设计感到有些困惑.由于这种类型的显示，这意味着例如在桌面上正常读取的 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*/
}
并确保您的 标签中有此内容:
And make sure you have this in your <HEAD> tag:
<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
}
这篇关于响应式网页设计和高分辨率显示器 (iPhone 4/5)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
