一般，自适应移动端加这个语句即可
<meta name="viewport" content="width=device-width">
但是，不知道为什么加了这个语句还是没用，查了查可能跟下面这几个元素有关系，所以可以尝试这样子加：
<script>
var viewportContent = '';
if (window.devicePixelRatio = 1) {
viewportContent = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi';
} else if (window.devicePixelRatio == 2) {
viewportContent = 'width=device-width, initial-scale=1.0, maximum-scale=1.0';
} else if (window.devicePixelRatio == .78) {
viewportContent = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi';
} else if (window.devicePixelRatio == 1.5) {
viewportContent = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi';
}
$('head').append('<meta name="viewport" content="' + viewportContent + '">');
</script>
- css像素
- html中度量的单位 用px来计算，在pc中往往 1 css px ＝ 1 物理像素
- css像素时抽象和相对的了，在不同设备中1px对应不同的设备像素；iphone3分辨率是320*480 即 css 1px ＝ 1个物理像素；iphone4 分辨率640x960但屏幕尺寸没有改变，意味着同一块区域像素多了1倍 即 css 1px ＝2个物理像素；
- 物理像素
- 表示每英寸所拥有的像素数目，数值越高，代表屏幕能够以更高的密度来显示图像
- 分辨率
- 显示器所能显示的像素多少，显示器可以显示的像素越多，画面就越精细，同样的屏幕区域能显示的信息就越多
- devicePixelRatio
- window.devicePixelRadio = 物理像素/css像素 在iphone4中devicePixelRatio＝2 也就是1css像素＝2个物理像素
- devicePixelRatio在不同浏览器中存在一些兼容性问题，并不是完全可靠的
-
其他一些系统、设备
1. iOS
类似的，无视网膜设备devicePixelRatio值为1，视网膜设备为2. 因为实际的像素个数是双倍。不过，iphone似乎不愿意改变大家都熟知习惯的320像素宽度布局，没有把设备宽度一下子变成640像素，因此，dips宽度依然是320, 于是devicePixelRatio就是640/320 = 2.iOS上的情况要相对简单些，除了
1就是2. 在其他平台也基本上很简单，因为一般分辨率都比较挫，devicePixelRatio都是1.2. Android
据我所知，谷歌的Nexus One是第一个使用dips的，比iphone还早。同时Galaxy Nexus以及Galaxy Note都是类运动视网膜显示器。近距离探究这三个设备应该会有所收获。Nexus One分辨率是480*800, 为了最优的页面浏览，Android WebKit团队决定纵向手持时候的宽度依然是320像素，因此，
devicePixelRatio值为480/320 = 1.5.
在同一手机上，Opera Mobile有相同的结论，dips为320宽，devicePixelRatio也是1.5.顺便提一下，BlackBerry Torch 9810(OS7)物理像素同样480像素，BlackBerry WebKit团队决定坚持
devicePixelRatio为1. 这可能是更不错的做法，在Torch显示器上480px宽度站点或多或少有些难以阅读。Galaxy Nexus有像素的提升，为720×1200. Android团队决定提高dips层的宽度到360像素。从而使
devicePixelRatio为720/360 = 2. Chrome团队决定跟进，就如腾讯QQ浏览器所做的那样。然而，Opera，坚持自我，dips宽度为320px, 于是
devicePixelRatio为720/320 = 2.25. 不过似乎还与zoom缩放层级有关。Galaxy Note物理像素为800×1200. 这里所有浏览器都决定使用与Galaxy Nexus一样的比率：Android WebKit, Chrome, 以及QQ都是
2，也就意味着其dips宽度为400px. 然而，Opera依然一意孤行2.25, 于是其dips宽度值有些怪怪的: 356px.Android标准似乎不严格，于是自家人玩自家人的游戏，对于开发者而言，可能又会面临苦逼~~
3. 视网膜MacBook
新的MacBook采用视网膜显示屏，其devicePixelRatio是（如果不出意外）2. 视网膜MacBook的物理像素是2800×1800，而显示出分辨率为1400×900，如果把分辨率作为dips层，则devicePixelRatio为2应该是无误的。需要指出的是，如果你把分辨率改成1920×1200，
devicePixelRatio依然是2. 严格来讲，这是不准确的，应该是1.5, 然而你也可以说MacBook的分辨率不同于dips层，这种情况下devicePixelRatio在台式机/笔记本下的定义就不一样（哪一个？不知道。）。在任何情况下，根据苹果的规范做法，
devicePixelRatio值只可能是1或者2. 如果你看到2，你要提供视网膜优化显示图片，如果是1，使用正常的图片——（这里内容其实属于视网膜站点的开发内容）。 -
结论
devicePixelRatio在大多数浏览器是值得信赖的。- 在iOS设备，
screen.width乘以devicePixelRatio得到的是物理像素值。 - 在Android以及Windows Phone设备，
screen.width除以devicePixelRatio得到的是设备独立像素(dips)值。
- layout viewport
- 移动设备的默认viewport,css布局是以layout viewport 来做为参考系计算的
- document.documenElement.clientWidth 获取
- 该尺寸时动态设置
- visual viewport
- 代表浏览器窗口的尺寸，当用户放大浏览器时这个尺寸就会变小
- window.innerWidth 获取
- ideal viewport
- 屏幕尺寸 设备屏幕的尺寸 单位是物理像素
- screen.width 获取 屏幕尺寸是不变的
- 在该viewport中用户不需要缩放和横向滚动就可以正常查看网站的所有内容
- 设置移动端网站一般以这个viewport为准,ideal viewport 的宽度等于设备屏幕宽度，使得无论在什么分辨率下，那些针对ideal viewport设计的网站都可以完美的呈现给用户。