使用 Android 模拟器和浏览器放大时页面上的元素（即 a、div、h1）会移动
注意：我使用的是 jQuery 和 jQuery Mobile。
我有一个移动页面，在缩放（或捏合）时尊重元素的定位方面，它似乎在 iOS 中工作正常。在 Android 中，这是另一个故事。使用 Android SDK 模拟器，我的所有内容都被压缩了。我知道有一种方法可以强制缩放时内容不会移动；我在使用 Android 浏览器时在桌面网站上看到过它。禁用缩放不是答案，因为我在页面上有一个图像，并且我希望用户放大该图像。
总结一下：
- 我希望在缩放（放大）时保持所有内容不受干扰。
非常感谢您的帮助。
这是完整的页面（包括CSS）：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test Mobile Page</title>
<meta name="description" content="This is a test page." />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index,follow" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=10.0, user-scalable=yes">
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<style type="text/css">
#header {
background: blue bottom left repeat-x;
padding: 3px 5px 0 5px;
}
.BackBtn {
float:left;
}
.IndexBtn {
float:right;
}
.ui-body-c {
background-color: #EEF3F8;
}
.ui-btn {
font-size: 0.8em;
}
.ui-btn-inner {
padding: .6em 10px;
}
h2 {
background: silver bottom left repeat-x;
color:#333;
font-weight:bold;
line-height:1em;
clear:both;
}
h4 {
clear: both;
}
#Content #TableDiv TH, #Content #TableDiv TD {
border:1px solid;
border-collapse:collapse;
border-color:rgb(153,153,153);
}
#Content #TableDiv TD {
background:#FFF;
}
#Content #TableDiv TH {
padding: 5px;
background: #F0F0E0;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
}
img {
clear: both;
}
</style>
</head>
<body>
<div data-role="page" id="Index">
<div id="header">
<h1>Title</h1>
</div>
<a href="JavaScript:history.back();" data-direction="reverse" data-role="button" data-icon="arrow-l" data-inline="true" class="BackBtn">Back</a>
<a href="#Index" data-direction="reverse" data-role="button" data-icon="home" data-inline="true" class="IndexBtn">Home</a>
<h2>Section</h2>
<h4 id="Article1">Article1</h4>
<h4 id="Article2">Article2</h4>
<h4 id="Article3">Article3</h4>
<div id="Content">
<div id="TableDiv">
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 3</td>
<td>Value 4</td>
</tr>
</table>
</div>
</div>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Rotating_earth_(large).gif/200px-Rotating_earth_(large).gif"/>
</div>
</body>
</html>
更新
我想通了，如果我在页面上指定一个设置宽度，如下所示：
<div data-role="page" id="Index" style="width:320px;">
缩放不会干扰页面的内容。
但我最多想保持液体布局或液体（混合）布局。我可以使用 JavaScript 将 div 的宽度指定为设备的宽度。除了 JavaScript 或在 CSS 中设置特定像素（或 em）宽度之外，是否有使用液体布局设计的等效方法？
谢谢。
Note: I'm using jQuery and jQuery Mobile.
I have a mobile page which seems to work okay in iOS, as far as respecting elements' positioning when zooming (or pinching). In Android, this is another story. Employing the Android SDK Emulator, all of my content is getting squeezed. I know there's a way to enforce that the content does not shift when zooming; I've seen it on desktop websites while using the Android browser. Disabling zooming is not the answer because I have an image on the page and I want the user to zoom in on said image.
To sum up:
- I want to keep all content undisturbed when zooming (enlarging).
Thank you very much for any help.
Here is the full page (including css):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test Mobile Page</title>
<meta name="description" content="This is a test page." />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index,follow" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=10.0, user-scalable=yes">
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<style type="text/css">
#header {
background: blue bottom left repeat-x;
padding: 3px 5px 0 5px;
}
.BackBtn {
float:left;
}
.IndexBtn {
float:right;
}
.ui-body-c {
background-color: #EEF3F8;
}
.ui-btn {
font-size: 0.8em;
}
.ui-btn-inner {
padding: .6em 10px;
}
h2 {
background: silver bottom left repeat-x;
color:#333;
font-weight:bold;
line-height:1em;
clear:both;
}
h4 {
clear: both;
}
#Content #TableDiv TH, #Content #TableDiv TD {
border:1px solid;
border-collapse:collapse;
border-color:rgb(153,153,153);
}
#Content #TableDiv TD {
background:#FFF;
}
#Content #TableDiv TH {
padding: 5px;
background: #F0F0E0;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
}
img {
clear: both;
}
</style>
</head>
<body>
<div data-role="page" id="Index">
<div id="header">
<h1>Title</h1>
</div>
<a href="JavaScript:history.back();" data-direction="reverse" data-role="button" data-icon="arrow-l" data-inline="true" class="BackBtn">Back</a>
<a href="#Index" data-direction="reverse" data-role="button" data-icon="home" data-inline="true" class="IndexBtn">Home</a>
<h2>Section</h2>
<h4 id="Article1">Article1</h4>
<h4 id="Article2">Article2</h4>
<h4 id="Article3">Article3</h4>
<div id="Content">
<div id="TableDiv">
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 3</td>
<td>Value 4</td>
</tr>
</table>
</div>
</div>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Rotating_earth_(large).gif/200px-Rotating_earth_(large).gif"/>
</div>
</body>
</html>
Update
I figured out if I specify a set width on the page like this:
<div data-role="page" id="Index" style="width:320px;">
The zooming does not disturb the contents of the page.
But I want to maintain a liquid layout, or a fluid (hybrid) layout, at best. I can use JavaScript to specify the width of the div to the width of the device. Other than JavaScript, or setting a specific pixel (or em) width in CSS, is there an equivalent method using a liquid layout design?
Thank you.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我想通了，如果我在页面上指定一个设置宽度，如下所示：
缩放不会干扰页面的内容。
不幸的是，如果方向发生变化，那么这将没有帮助，尤其是在缩放时。
I figured out if I specify a set width on the page like this:
The zooming does not disturb the contents of the page.
Unfortunately, if the orientation changes, then this won't be helpful, especially when zooming.
我建议打开您正在谈论的桌面网站之一，并使用一些浏览器插件来查看 hrml 和 css 。这就是我一直在做的事情:)
I suggest opening one of those desktop websites you are talking about and cheeking there hrml and css with some browser plugin . thats what i do all the time :)