iOS和Android浏览器都基于WebKit(http://www.webkit.org/)核心。这两种浏览器以及很多其他浏览器(如Opera Mobile),都支持用viewport meta元素覆盖默认的画布缩放设置。只需要在HTML的<head>标签中插入一个<meta>标签。<meta>标签中可以设置具体的宽度(如像素值)或者缩放比例如2.0(设备实际尺寸的两倍)。下面是一个将页面放大到设备实际尺寸两倍显示的meta标签的示例:
<meta name="viewport" content="initial-scale=2.0,width=device-width" />
将这个标签插入到我们的HTML中,如下面的代码所示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0,width=device-width">
<title>网站标题</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>