使用Android模擬器和瀏覽器放大時，頁面上的元素（即a，div，h1）會移動

Question

注意：我正在使用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）寬度，是否有使用液體布局設計的等效方法？

謝謝。

Answer 1

我建議打開您正在談論的那些台式機網站之一，並使用一些瀏覽器插件在hrml和css上貼一下。 那就是我一直在做的事情:)

Answer 2

我想出如果我在頁面上指定這樣的寬度：

<div data-role="page" id="Index" style="width:320px;">

縮放不會干擾頁面的內容。

不幸的是，如果方向發生變化，那么這將無濟於事，尤其是在縮放時。

使用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