JQuery 移动设备缩放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6448465/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery Mobile Device Scaling
提问by Chris
I am using JQuery Mobile and I am having trouble with the scaling from my browser to my iPhone.
我正在使用 JQuery Mobile，但在将浏览器缩放到 iPhone 时遇到问题。
When I load it on a browser (safari) it shrinks and expands just fine. However when I load it on my iPhone it doesn't scale. It allows you to scroll left and right when it shouldn't.
当我在浏览器（safari）上加载它时，它会缩小和扩展得很好。但是，当我将它加载到 iPhone 上时，它不会缩放。它允许您在不应该左右滚动时左右滚动。
Is there something I am supposed to add to make it scale down on recognize that it's a mobile device.
有什么我应该添加的东西，让它在认识到它是一个移动设备时按比例缩小。
Here is my current html.
这是我当前的 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>
回答by Jasper
I had problems with the iPhone viewport and JQuery-Mobile as well, I ended up with the following solution.
我的 iPhone 视口和 JQuery-Mobile 也有问题，我最终得到了以下解决方案。
- Add a meta tag that sets the height and width to the device-height/device-width (you can allow the user to zoom by changing the maximum-scale to something above 1 however zoom is disabled in the following example, I believe Mobile Safari allows a value up to 10):
- 添加一个元标记，将高度和宽度设置为设备高度/设备宽度（您可以通过将最大比例更改为 1 以上来允许用户进行缩放，但是在以下示例中禁用了缩放，我相信 Mobile Safari允许值最多为 10)：
<meta name="viewport" content="height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0" >
<meta name="viewport" content="height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0" >
- As the user changes the orientation on iPhone I noticed some strange behaviors with re-scaling and added white-space so I used the following code:
- 当用户在 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,initial-scale=1.0,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');
}
The if/then statement in the event handler checks for which orientation the user has changed to (90, -90, and 270 are all values I've seen for landscape) and the $viewport.attr('content',...lines just switch the height and width values in the viewport tag.
事件处理程序中的 if/then 语句检查用户已更改为哪个方向（90、-90 和 270 都是我见过的横向值）并且这些$viewport.attr('content',...行只是在视口标签中切换高度和宽度值.
回答by Don McCurdy
In Jquery Mobile 1.1.0, the above answer only seems to work in portrait orientation for me. I searched around and found this version of the meta tag, which (in my case) worked in both orientations, without need for any javascript:
在 Jquery Mobile 1.1.0 中，上面的答案对我来说似乎只适用于纵向。我四处搜索并找到了这个版本的元标记，它（在我的例子中）在两个方向都可以工作，不需要任何 javascript：
<meta content="width=device-width, minimum-scale=1, maximum-scale=1" name="viewport">
(Specifies device width, but not the height.)
（指定设备宽度，但不指定高度。）
资料来源：http: //www.wintellect.com/cs/blogs/rrobinson/archive/2011/07/25/how-to-scale-a-jquery-mobile-site-for-ios.aspx
