Retina iPhone 无法使用响应式 Twitter Bootstrap
Posted
技术标签:
【中文标题】Retina iPhone 无法使用响应式 Twitter Bootstrap【英文标题】：Retina iPhone not working with responsive Twitter Bootstrap 【发布时间】：2012-08-02 06:04:32 【问题描述】：我正在将 Twitter Bootstrap 与响应式 CSS 用于设计为在 UIWebView 中运行的网页。
我希望页面在所有 iPhone 上看起来都一样，除了对于视网膜 iPhone 分辨率应该加倍的图像，但占用相同的“空间”。
我已成功将以下内容添加到我的 style.css 以换入和换出正确的图像：
.normalres display:block /* or anything else */
.retinares display:none
@media all and (-webkit-min-device-pixel-ratio: 2)
.normalres display:none
.retinares display:block
我在以下情况下使用这些：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content"">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/bootstrap-responsive-mod.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<h5>Why this phone app?</h5>
<img class="pull-right normalres" src="img/iphone.png">
<img class="pull-right retinares" src="img/iphone_retina.png">
<p>Blah Foo Bar</p>
</div>
</div>
</div> <!-- /container -->
</body>
</html>
两张图片分别为 150px 宽和 300px 宽。
但是，我在使用视网膜 iPhone 时遇到了问题。加载了正确的图像，而不是将其拉到右侧（以及围绕它流动的文本），这在非视网膜 iPhone 上发生得很好，图像被拉伸到浏览器的整个宽度，并且没有任何东西在它周围流动。因此它看起来与非视网膜版本不同。
我相信这与 Bootstrap 认为视网膜 iPhone 像普通 iPhone 一样低分辨率 (320x480) 然后看到相当大的视网膜图像（320 像素宽）并弄错布局有关。
我想我必须告诉 Bootstrap responsive 将视网膜 iPhone 视为 640 像素宽的设备而不是 320 像素宽的设备，但我不知道 responsive.css 中要更改哪些媒体查询以及如何更改它们。
【问题讨论】：
【参考方案1】：我有一个类似的问题，我希望 iPhone 浏览器以比默认 320 像素更高的分辨率呈现一个肖像视口。 OP似乎在问这个问题：
我想我必须告诉 Bootstrap 响应式治疗视网膜 iPhone 喜欢 640 像素宽的设备，而不喜欢 320 像素宽的设备，但我 不知道要更改 responsive.css 中的哪些媒体查询以及如何更改 改变它们。
我使用的修复是修改视口meta标签：
<meta name="viewport" content="width=device-width, initial-scale=0.8, maximum-scale=1">
然后我能够以大约 400 像素的宽度进行渲染。要达到 640 像素，只需将 initial-scale 的值设为 0.5。请注意，这将影响所有类似移动设备的设备，而不仅仅是视网膜 iPhone，因此您需要使用多个设备进行测试。
我使用了一些 javascript 来查看 iphone 窗口的宽度是多少：
$("#screenWidth").text($(window).width());
$(window).resize(function()
$("#screenWidth").text($(window).width());
);
并向页面添加一些 HTML：
<div>screen width: <span id="screenWidth"></span>px</div>
【讨论】：
以上是关于Retina iPhone 无法使用响应式 Twitter Bootstrap的主要内容，如果未能解决你的问题，请参考以下文章
无法在 iPhone 6.0 模拟器 Retina 4 英寸上全屏启动我的应用程序
响应式设计 - Media Query无法在iPhone上运行？
如何让 WebView 在 iPhone/iPad Retina 中工作
iPhone/iPad 和 iPhone(Retina)/iPad(Retina) 中图像的理想分辨率