我使用的是JQuery Mobile，我的浏览器缩放到我的iPhone时遇到麻烦。
当我在浏览器(safari)上加载它时，它收缩和扩展就好了。但是当我将其加载到我的iPhone上时，它不会缩放。它允许您在不应该的情况下向左和向右滚动。
有什么我应该添加，以使它缩小，认识到它是一个移动设备。
这是我现在的html。
<head>
<title>Page Title</title>
<Meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="http://www.domain.com/css/jquery.mobile-1.0b1.min.css" />
<link rel="stylesheet" href="http://www.domain.com/css/base.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js">
</script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
</head>
<body>
<body>
<!-- Start of first page -->
<div data-role="page">
<div data-role="header">
<div id="header">
<ul>
<li>
<div><a href="logout.PHP">logout</a>
</div>
</li>
<li style="float:right;">
<div><a href="new.PHP">New</a>
</div>
</li>
<h1 align="center">Title</h1>
</ul>
<div id="clear"></div>
</div>
</div>
<!-- /header -->
<div id="stream">
<div id="stream_story">
<ul style="width:100%">
<li>
<img src="" />
</li>
<li style="float:right;">></li>
<li style="width:75%;margin-bottom:10px;margin-left:5px;">Content
<br/><span>Content</span>
</li>
</ul>
</div>
<div id="clear"></div>
<hr/>
</div>
<!-- /content -->
</div>
<!-- /page -->
</body>
</body>
</html>
解决方法
我也有iPhone视口和JQuery-Mobile的问题，我结束了以下解决方案。
>添加一个Meta标签，将高度和宽度设置为device-height / device-width(您可以允许用户通过将最大比例更改为1以上的缩放，但在以下示例中缩放被禁用，相信Mobile Safari允许值高达10)：
< Meta name =“viewport”content =“height = device-height，width = device-width，initial-scale = 1.0，maximum-scale = 1.0”
>随着用户改变iPhone上的方向，我注意到一些奇怪的行为，重新缩放和添加了空格，所以我使用了以下代码：
//check the navigator.userAgent string to detect if the user is using an iPhone
if (navigator.userAgent.match(/iPhone/i)) {
//cache the viewport tag if the user is using an iPhone
var $viewport = $('head').children('Meta[name="viewport"]');
//bind an event handler to the window object for the orientationchange event
$(window).bind('orientationchange',function() {
if (window.orientation == 90 || window.orientation == -90 || window.orientation == 270) {
//landscape
$viewport.attr('content','height=device-width,width=device-height,initial-scale=1.0,maximum-scale=1.0');
} else {
//portrait
$viewport.attr('content','height=device-height,width=device-width,maximum-scale=1.0');
}
//trigger an orientationchange event on the window object to initialize this code (basically in-case the user opens the page in landscape mode)
}).trigger('orientationchange');
}
事件处理程序中的if / then语句检查用户改变了哪个方向(90，-90和270是我看到的景观的值)和$ viewport.attr(‘content’，…)行只是切换视口标签中的高度和宽度值。
