Я использую JQuery Mobile, и у меня возникают проблемы с масштабированием моего браузера на мой iPhone.
Когда я загружаю его в браузер (сафари), он сжимается и расширяется просто отлично. Однако, когда я загружаю его на свой iPhone, он не масштабируется. Он позволяет прокручивать влево и вправо, если это не так.
Есть ли что-то, что я должен добавить, чтобы он уменьшался, узнав, что это мобильное устройство.
Вот мой текущий html.
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="#" onclick="location.href='http://www.domain.com/css/jquery.mobile-1.0b1.min.css'; return false;" />
<link rel="stylesheet" href="#" onclick="location.href='http://www.domain.com/css/base.css'; return false;" />
<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>