使用Android模拟器和浏览器放大时，页面上的元素（即a，div，h1）会移动

Question

Note: I'm using jQuery and jQuery Mobile. 注意：我正在使用jQuery和jQuery Mobile。

I have a mobile page which seems to work okay in iOS, as far as respecting elements' positioning when zooming (or pinching). 我有一个移动页面，在缩放（或收缩）时尊重元素的位置，它似乎在iOS中可以正常工作。 In Android, this is another story. 在Android中，这是另一个故事。 Employing the Android SDK Emulator, all of my content is getting squeezed. 使用Android SDK仿真器，我的所有内容都受到挤压。 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. 我在使用Android浏览器的桌面网站上看到了它。 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): 这是整页（包括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. 我可以使用JavaScript将div的宽度指定为设备的宽度。 Other than JavaScript, or setting a specific pixel (or em) width in CSS, is there an equivalent method using a liquid layout design? 除了JavaScript，或在CSS中设置特定的像素（或em）宽度，是否有使用液体布局设计的等效方法？

Thank you. 谢谢。

Answer 1

I suggest opening one of those desktop websites you are talking about and cheeking there hrml and css with some browser plugin . 我建议打开您正在谈论的那些台式机网站之一，并使用一些浏览器插件在hrml和css上贴一下。 thats what i do all the time :) 那就是我一直在做的事情:)

Answer 2

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. 缩放不会干扰页面的内容。

Unfortunately, if the orientation changes, then this won't be helpful, especially when zooming. 不幸的是，如果方向发生变化，那么这将无济于事，尤其是在缩放时。

使用Android模拟器和浏览器放大时，页面上的元素（即a，div，h1）会移动

问题描述

2 个解决方案

解决方案1
0 2012-10-25 13:38:40

解决方案2
0 已采纳 2012-03-08 20:25:14

使用Android模拟器和浏览器放大时，页面上的元素（即a，div，h1）会移动

问题描述

2 个解决方案

解决方案1 0 2012-10-25 13:38:40

解决方案2 0 已采纳 2012-03-08 20:25:14

解决方案1
0 2012-10-25 13:38:40

解决方案2
0 已采纳 2012-03-08 20:25:14