Viewport :
 
字面意思为视图窗口,在移动 web 开发中使用。表示将设备浏览器宽度虚拟成一个特定的值(或计算得出),这样利于移动 web 站点跨设备显示效果基本一致。
 
基本写法:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1,target-densitydpi=medium-dpi">
测试获取 viewport 的 width :
document.documentElement.clientWidth
1、在 iphone 上是读取 device-width 的值,并自动计算出 target-densitydpi 去适配,在 iphone4 上读取的值为 320  。
最终的计算公式为:
当 initial-scale=1 时:
ViewportWidth=width  ;
当 initial-scale !=1 时:
ViewportWidth=width  >  320 / initial-scale ? Width : 320 / initial-scale ;
ViewportWidth 不超过 1280 ,大于取 1280  。
2、在 android 上,读取的是 target-densitydpi  。在不设置的情况下,默认选择的是 medium-dpi(160)  。以下讨论均在中屏幕大小的手机上范围内:
Dpi 的分级与其对应的代表分辨率:
Low-dpi:240*320 (基本淘汰,暂不讨论)
Medium-dpi:320*480
High-dpi:480*800
Super high-dpi:640*960   其对应的 dpi 为 120 、 160 、 240 、 320  。
实验一:对 480*800 设置 dpi 为 medium-dpi ,其 viewport 为 320 ;设为 high-dpi  ,其 viewport 为 480 ;设为 device-dpi  ,其 viewport 为 480 ;
实验二:对 540*800 设置 medium-dpi , viewport 为 360 ;设为 high-dpi  ,其 viewport 为 540 ;设为 device-dpi  ,其 viewport 为 540 ;设为 low-dpi  ,其 viewport 为 270 ;
总结:从上面两个实验可得出:
当设备为 high-dpi 设备时,设置为中分辨率的 viewportwidth 为( 2/3 ) *device-width ;设置为 low-dpi 时,为( 1/2 ) *device-width 。这个比例和其 dpi 的比例是一致的, 2/3=160/240 和 1/2=120/240 ;
推测 dpi 的值与 viewportwidth 存在一元关系。
 
①假设我要做一个 android high-dpi 设备应用,虚拟的 viewportwidth 定死为 320px 。
设 device-width=x ,( 2/3 ) *x 为该设备设为 medium-dpi 时 viewportwidth 的值, x/240 表示一个 dpi 值代表多少个 px 。
Target-densitydpi=160 - { ( 2/3 ) *x-320}/(x/240);
简化一下: Target-densitydpi=320*240/x ;
实验三:在 540 手机上设置 Target-densitydpi=142 ,其 viewport 为 320  。
根据以上公式可以计算出 Target-densitydpi=142.222222 ,与上面测试数据一致。
②假设我要做一个 android super-high-dpi 设备应用,虚拟的 viewportwidth 定死为 320px 。
Target-densitydpi=320*320/x ;
此公式未进行试用期验证。
③假设我要做一个 android medium-dpi 设备应用,虚拟的 viewportwidth 定死为 320px 。
Target-densitydpi=160 - {x-320}/(x/160);
Target-densitydpi=320*160/x
实验成功
④假设我要做一个 android low-dpi 设备应用,虚拟的 viewportwidth 定死为 320px 。
Target-densitydpi=160 - { ( 4/3 ) x-320}/(x/120);
Target-densitydpi=320*120/x
此公式未进行试用期验证。
特例: htcA510E :在 width 设有具体值时,会读取 width ,忽略 dpi 。
联想 K1 pad  不读取 dpi ,只读取 width ,而且当 width 小于等于 320 的时候忽视,直接取 device-width 。
3、htc input 缩放问题。当 viewport 的值大于 device-width 时,会出现 input 获取焦点放大。所以在设计中选择基于 320 分辨率( 240 设备淘汰不讨论),出图基于 640 ,图片 0.5 缩放保证清晰度。

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

Viewport解决分辨率适配问题的更多相关文章

  1. cocostudio做出来的界面如何进行分辨率适配,兼论cocos2dx3的多分辨率适配机制,以及retina适配机制

    cocos有很多代码实际上都不再使用了,看代码时反而误导了程序员. 比如一个简单的分辨率适配,我查到了setContentSize,然后调用setContentSize,毫无用处啊!于是乎,我到处查资 ...

  2. xcode 开发ios兼容性问题的上下黑边 和 coco2d-x 游戏分辨率适配 ResolutionPolicy::FIXED_WIDTH 都会引起上下黑边问题!!!

    1:Xcode6在iPhone5+iOS7模拟器上编译,上下有黑边问题 问题描述: Xcode6环境下,对iPhone5或iPhone5s模拟器,在iOS7或iOS7.1下运行,屏幕上下有黑边.在iO ...

  3. cocos2dx 分辨率适配问题

    分辨率适配问题好文章: http://www.cocoachina.com/bbs/read.php?tid=201987&page=1&toread=1#tpc http://www ...

  4. 【cocos2d-x 手游研发小技巧(3)Android界面分辨率适配方案】

    先感叹一下吧~~android的各种分辨率各种适配虐我千百遍,每次新项目我依旧待它如初恋···· 每家公司都有自己项目工程适配的方案,这种东西就是没有最好,只有最适合!!! 这次新项目专项针对andr ...

  5. viewport移动端适配,读文笔记

    文章地址: viewport移动端适配 笔记: 移动端适配目的: 希望在屏幕尺寸大小不同的手机上进行访问页面时,页面显示的效果能合理的展示,我们期望的是在手机屏幕较大时显示的内容比较大一些,手机屏幕小 ...

  6. Android分辨率适配心得

    关于Android分辨率适配,这个是Android开发很头疼的一个问题,也需要花费相当一部分开发时间处理的一个问题,往往一个界面怎么适配就得想半天,特别是新手,也经常有人问我是怎么适配分辨率的,我也不 ...

  7. Unity 利用NGUI做屏幕分辨率适配+学习UIDraggablePanel的使用

    原地址:http://blog.sina.com.cn/s/blog_697b1b8c0101g2r4.html 大家使用unity,一定有看中其跨平台的强大功能,因此也难免会遇到不同屏幕分辨率适配的 ...

  8. 如何使用cocos2dx-jsbinding 来处理分辨率适配

    首先说点题外话,对于任何大型项目来说,coding的规范重要,在cocos2dx-jsbinding这个框架中,javascript是一个绝对核心的脚本语言,99%的游戏逻辑都由js完成.脚本的编写量 ...

  9. Ngui分辨率适配

    必备知识点 1.分辨率适配必然是Orthographic Camera 2.Camera下对应的“Size”(图1)属性大小的理解:当前摄像机高度 = Size * 2 * UnityUnit(Uni ...

随机推荐

  1. Android之操作SQLite

    一.SQLite的介绍 1.SQLite简介 SQLite是一款轻型的数据库,是遵守ACID的关联式数据库管理系统,它的设计目标是嵌入  式的,而且目前已经在很多嵌入式产品中使用了它,它占用资源非常的 ...

  2. Http状态码的种类及含义

    1xx 临时响应:2xx 成功:3xx 重定向: 4xx 请求错误: 5xx 服务器错误: http://www.hostspaces.net/wenzhang-detail.php?id=198 常 ...

  3. leetcode–jump game II

    1.题目描述 Given an array of non-negative integers, you are initially positioned at the first index of t ...

  4. IOS自动布局

    参考资料 https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/AutolayoutPG/Vi ...

  5. Compiling Xen-4.4 From Source And Installing It On Ubuntu Server (Amd-64)

    First of all, you should install a clean Ubuntu Server (Amd-64) on your server. (Version 14.04 is st ...

  6. jquerymobile,手机端click无效

    1.直接把<script>放到html代码后面,不要放到@section里面. 2.使用代理.如下所示: <script type="text/javascript&quo ...

  7. 转载-SQL中的where条件,在数据库中提取与应用浅析

    1        问题描述 一条SQL,在数据库中是如何执行的呢?相信很多人都会对这个问题比较感兴趣.当然,要完整描述一条SQL在数据库中的生命周期,这是一个非常巨大的问题,涵盖了SQL的词法解析.语 ...

  8. DaoFactory.java

    package com; import com.isoftstone.fwk.dao.ActionDao; import com.isoftstone.fwk.dao.Dao; import com. ...

  9. poj 1247 The Perfect Stall 裸的二分匹配,但可以用最大流来水一下

    The Perfect Stall Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 16396   Accepted: 750 ...

  10. HDU 5444 Elven Postman (二叉树,暴力搜索)

    题意:给出一颗二叉树的先序遍历,默认的中序遍历是1..2.……n.给出q个询问,询问从根节点出发到某个点的路径. 析:本来以为是要建树的,一想,原来不用,其实它给的数是按顺序给的,只要搜结点就行,从根 ...