用bootstrap做的html5页面在iphone6 plus上显示时字体刚开始显示正常，1~2秒后字体都放大了如何修改！
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用bootstrap做的html5页面在iphone6 plus上显示时字体刚开始显示正常，1~2秒后字体都放大了如何修改！相关的知识，希望对你有一定的参考价值。
测试代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>你好，世界！</h1>
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
系统设置里面调节字体大小
1.进入到“设置”
2.找到设置中“显示与亮度”
3.然后再找到“文字大小”
4.直接拖动字体滑杆
5.调整之后就可以看到字体小了
6.如果发现没有效果的话 ,重启iphone
参考技术B head里面加上：<meta name="viewport" content="width=device-width, initial-scale=1">
另外字号设置用百分比和pt
Retina iPhone 无法使用响应式 Twitter Bootstrap
【中文标题】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>
【讨论】：
以上是关于用bootstrap做的html5页面在iphone6 plus上显示时字体刚开始显示正常，1~2秒后字体都放大了如何修改！的主要内容，如果未能解决你的问题，请参考以下文章
后台管理系统用bootstrap做的，怎么实现用户和管理员登录进入不同页面
为啥 iphone Simulator 不能正确呈现 HTML5 页面？