关于针对移动设备的网页设计
控制网页内容在移动设备上的显示，可以使用viewport标签
把下面这个东西复制到我们的head标签中：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.1, maximum-scale=3.0, user-scalable=yes">
meta viewport 有6个属性，如下：
width 设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
initial-scale 设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
height 设置layout viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许
这些属性可以同时使用，也可以单独使用或混合使用，多个属性同时使用时用逗号隔开就行了。
一般设置网页显示宽度为移动设备的屏幕宽度，初始缩放为1，即不缩放。
如果网页中要显示图片，可以通过宽度百分比来控制图像大小，如图片宽度设置为页面的90%：
<img src="test.jpg" width="90%" />
对于某些需要固定显示宽度的网页（如使用map/area定位图片位置产生链接），则可以指定viewport的width，同时改变初始缩放值initial-scale，也可以不指定initial-scale，会自动调整缩放比例至全屏显示：
- <html>
- <head>
- <meta name="viewport" content="width=960,minimum-scale=0.1, maximum-scale=3.0, user-scalable=yes">
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- </head>
- <body>
- <img src="./img/yyyb.gif" style="width: 960px; height: 874px;" usemap="#Map">
- <map id="Map" name="Map">
- <area coords="221,76,256,120" href="javascript:mplay('...');" >
- ...
- </body>
- </html>
上面的页面指定显示宽度为960px，并自动调整初始缩放比例以便于在移动设备显示
发表评论