viewport解决分辨率适配问题

最新推荐文章于 2021-06-17 03:46:35 发布

weixin_30809333

最新推荐文章于 2021-06-17 03:46:35 发布

阅读量251

点赞数

CC 4.0 BY-SA版权

文章标签：移动开发

原文链接：http://www.cnblogs.com/drmfly/archive/2012/06/05/2536041.html

Viewport在移动Web开发中用于定义视图窗口大小，确保跨设备显示效果一致。通过计算设备浏览器宽度来动态调整，适用于手机但pad上存在局限。结合PhoneGap生成Android应用时需注意不同平台对Viewport的支持差异。

Viewport：字面意思为视图窗口，在移动web开发中使用。表示将设备浏览器宽度虚拟成一个特定的值（或计算得出），这样利于移动web站点跨设备显示效果基本一致。

在开发时最好基于320宽进行开发，图片基于640做，在放置图片时可以用background-size或zoom缩放一倍，图片在高清晰屏上就不会模糊。在加载页面时通过读取设备的width去计算dpi然后动态生成meta标记，可以很好解决手机的分辨率适配问题。但是在android pad端上不适用，原因有二，一、pad对width是计算还是读取比较混乱，有些像ios，有些读dpi，还有的两个都读，然后分段比较。二、pad的高中低dpi分档和手机不一样，没有统一标准。