今儿加班赶个活，临时弄个演示页面，需要嵌入到安卓手机APP里使用，然后又遇到之前就遇到的一个历史遗留问题，关于页面宽度自适应手机屏幕这个纠结的事情，自适应是OK的，但是，手机浏览器非要自作多情的把页面放大一点显示，导致网页上部分元素显示不正常，或者和PC浏览器上差异过大。以前遇到的时候，也就是折腾个大概，看起来差不多就行了，没有仔细去深究一下HTML相关控制代码，这次是有空，就彻底好好搜索一下，看有没有啥好办法能一劳永逸，唉，搜出的中文结果，基本是一大抄，你抄我的，我复制你的，你粘贴他的，测试了一圈，还是老样子。后来没招，看英文的HTML说明文档吧，然后又发现个参数，测试后发现有效，不敢独享，特发文纪念。
首先要做的，你的网页最开头，HTML5的页面头声明是必需的，老版本的HTML没有测试。 <!DOCTYPE HTML>
<html>
或者使用Mobile页面头声明：<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
然后再之后添加如下代码：<meta name='viewport' content='width=device-width, target-densitydpi=device-dpi, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no' />
这里的viewport相当于页面视图吧，用来控制网页如何显示的一个参数。重点在后面，content等号后面引号里的才是关键：
width：指定页面显示的宽度，可以是一个具体的值，比如480，默认单位应该是像素。或者可以是device-width，也就是让网页宽度自适应到设备的宽度。比如，你手机屏幕分辨率宽度是480像素，那网页显示的宽度就是480像素，如果是720像素，那网页宽度就是720像素。以此类推。
height：高度参数，用法同上。这个一般不用指定，反正一屏显示不下，可以滚动。
initial-scale：页面显示的初始比例大小，1.0表示原始大小，2.0表示放大一倍，0.5表示缩小一倍，以此类推。
minimum-scale：页面显示的最小比例，也就是用手机查看网页时，能把页面缩小到什么程度。具体赋值同上。
maximum-scale：页面显示的最大比例，也就是用手机查看网页时，能把页面放大到什么程度。具体赋值同上。
user-scalable：是否允许用户缩放网页显示。yes表示允许，no表示不允许。如果此项设置为no那么上面三项页面缩放相关的参数无效。
target-densitydpi：目标设备的像素密度，可能是这么个意思，单位是dpi，具体使用时给出数值即可，范围是70-400之间，不用带单位。Android Browser和WebView默认屏幕为中像素密度。其次还有一下其他几个参数值可用：
device-dpi: 使用设备原本的像素密度作为目标 dpi。不会发生默认缩放。
high-dpi: 使用高像素密度作为目标 dpi。中等像素密度和低像素密度设备相应缩小。
medium-dpi: 使用中等像素密度作为目标 dpi。高像素密度设备相应放大，低像素密度设备相应缩小。这是默认的target density。
low-dpi: 使用低像素密度作为目标 dpi。中等像素密度和高像素密度设备相应放大。
好了，起作用的终极参数就是这个target-densitydpi了，为了不让手机浏览器（Android Browser或者WebView）根据不同屏幕的像素密度对页面进行缩放，那就把这个参数的值设置为device-dpi吧，这样你的页面就不会被缩放了，页面显示会根据你手机分辨率来自适应显示，获得很好的显示效果，就和你在PC上浏览器里测试的效果一致。再配合前面那个宽度参数，页面就可以和设备屏幕相适应很好的显示了。最终俺使用的设置：<meta name='viewport' content='width=device-width, target-densitydpi=device-dpi, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no' />
