Примечание: я использую 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 или установки ширины определенного пикселя (или em) в CSS, существует ли эквивалентный метод, использующий жидкий дизайн макета?
Спасибо.