JQuery Mobile Page写法

最新推荐文章于 2021-05-12 14:14:24 发布

原创最新推荐文章于 2021-05-12 14:14:24 发布 · 891 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了如何通过设置<meta>标签中的viewport属性来优化移动设备上的网页显示效果。包括调整布局宽度、初始缩放比例等参数的具体应用实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

其中width表示网页的布局layout宽度。initial-scale表示初始时的缩放比例，minimum-scale和maximum-scale分别表示最小和最大缩放比例。这样，上面这个meta就表示布局宽度320像素，初始缩放为1倍（即不缩放），且禁止用户缩放（因为最大最小缩放都为1倍）——一个专为iPhone优化的网页通常就会用这样的设置。

如果你是针对960设计的，那么可以用这样一个meta：

这表示布局宽度为960像素，初始缩放为0.33，也就是，会缩小到大约1/3，这样正好可以在320像素的宽度里看到整个网页。你也可以不设initial-scale，因为手机浏览器大多默认会初始缩放到可容纳整个网页宽度。

jQuery官网给出如下Demo：

this is the standard boilerplate page template you should start with on a project:

<!DOCTYPE html> 
<html>
<head>
	<title>Page Title</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.css" />
	<script src="http://code.jquery.com/jquery-[version].min.js"></script>
	<script src="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.js"></script>
</head>

<body>
	


<div data-role="page">

	<div data-role="header">
		<h1>Page Title</h1>
	</div><!-- /header -->

	<div role="main" class="ui-content">
		<p>Page content goes here.</p>
	</div><!-- /content -->

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page -->
</body></html>