设置方法如下:

<meta name=”viewport” content=”width=640,target-densitydpi=device-dpi”/>

在某些时候,有的人会使用传统PC页面的制作方法,然后加上这样的viewport来强制让移动设备显示为640px的页面,初步测试在iPhone,Android的自带浏览器竖屏基本上都能正常。

但是在Android的应用webview里面,很多都可能显示异常,尤其是3倍高清的小米3,Nexus 5 等机器,页面会被缩小,width=640 被忽略。

经过测试验证,将 target-densitydpi的值也指定为300,可以解决这个问题。

这种做法能了解到的只有2个好处:

1、可以写1px的边框

2、可以让懒惰的人按照传统PC的写法来写代码

但是缺点非常明显:

1、横屏时也会以以这样的规则来渲染,必然会导致页面被放大,显示效果非常糟糕

2、页面无法自适应宽度

3、dpi太多,无法真正统一显示效果,如果某天出了4倍清晰度的屏幕,那么当前这种写法很可能会出现问题。