1、viewport概念:viewport就是设备的屏幕上能用来显示我们的网页的那一块区域.

viewport的默认值980px或1024px等,以下是浏览器的默认viewport宽度

2、css中的1px

devicePixelRatio = 物理像素 / 独立像素

css中的px是设备的独立像素,分辨率约到,1px代表的物理像素越大,devicePixelRatio越大,所以在1080*1920这样的设备上,默认情况下div的宽度设计为300ox(视devicePixelRatio的值而定)就铺满整个屏幕了.

浏览器默认的viewport叫layout viewport,可通过document.documentElement.clientWidth来获取,layout viewport宽度大于浏览器的可视区域宽度.

浏览器的可视区域叫visual viewport,可通过window.innerWith获取

移动设备的理想viewport叫做ideal viewport,不同设备的ideal viewport不同,可在http://viewportsizes.com查看不同设备的宽度

4、meta的viewport

1)<meta name="viewport" content=“width=device-width">测试结果:

注意:在iphone和ipad中ideal viewport都是竖屏的宽度

2)<meta name="viewport" content=“initial-scale=1”>可以达到1)中同样的效果,因为这个放大是相对于ideal viewport宽度的,放大1倍,就是相对ideal viewport 100%缩放

Window phone的IE无论横屏还是竖屏都按照竖屏设为ideal viewport

3)<meta name="viewport" content="width=400, initial-scale=1">

浏览器会取width和放大较大的值作为viewport值,例如with=400,ideal viewport 为480,取ideal viewport宽度

总结:把当前的viewport 设置为ideal viewport既可以是width=device-width也可以是设置inital-scale=1,但这两个均有小的不见兼容性,所以建议把两者都写上,inital-scale=1解决了iphone、ipad的毛病,width=device-with则解决了IE的问题

5、缩放相对于ideal viewport 来缩放,缩放值越大,当前的viewport宽度越小,例如iphone中ideal viewport 的宽度是320px,设置initial-scale=2,此时viewport就变成160px了,

因此得到公式:

visual viewport宽度 = ideal viewport宽度 / 当前缩放值

大部分浏览器符合这个理论,安卓自带的webkit浏览器只有在 initial-scale = 1 以及没有设置width属性时才是表现正常的,IE上根本不管inittial-scale,永远表现出来的是1

6、initial-scale的默认值,显然不是1,为1的时候layaout viewport 宽度等于ideal viewport宽度

安卓上好像没有默认值

iphone和ipad上的默认值很神奇,为了让页面完美展现在设备上(不出现滚动条),是自己计算的,

当前缩放值= ideal vieport宽度/visual viewport 宽度,

例如320手机,当前缩放值 = 320 / 980,也就是0.33

7、动态改变meta viewport标签

1)document.write

document.write(‘<meta name="viewport" content="width=device-width,initial-scale=1">')

2)setAttribute

<meta id="testViewport" name="viewport" content="width = 380">

<script>

var mvp = document.getElementById('testViewport');

mvp.setAttribute('content','width=480');

</script>

有英文读写能力可以参考:

https://www.quirksmode.org/mobile/viewports.html

https://www.quirksmode.org/mobile/viewports2.html

https://www.quirksmode.org/mobile/metaviewport/

viewport的深入调研的更多相关文章

  1. CMS模板应用调研问卷

    截止目前,已经有数十家网站与我们合作,进行了MIP化改造,在搜索结果页也能看到"闪电标"的出现.除了改造方面的问题,MIP项目组被问到最多的就是:我用了wordpress,我用了织 ...

  2. CSharpGL(35)用ViewPort实现类似3DMax那样的把一个场景渲染到4个视口

    CSharpGL(35)用ViewPort实现类似3DMax那样的把一个场景渲染到4个视口 开始 像下面这样的四个视口的功能是很常用的,所以我花了几天时间在CSharpGL中集成了这个功能. 在CSh ...

  3. 移动WEB开发之viewport

    问题: 在codepen上写了一个响应式页面,调试的时候没有问题.结果放到网站上,在手机上打开之后竟然和在电脑中的布局是一样的.         查阅资料之后知道响应式布局应该有这样一句话:<m ...

  4. viewport理解

    viewport预备知识 dpr === dppx dpr:device pixel ratio 设备像素比 dppx:Number of dots per px unit 每像素有多少点 . 1dp ...

  5. 移动WEB viewport 相关知识

    了解移动web viewport的知识,主要是为了切图时心中有数.本文主要围绕一个问题:切图时怎样设置<meta name="viewport">相关参数?围绕这个问题 ...

  6. 理解SVG的viewport,viewBox,preserveAspectRatio

    万丈高楼平地起,基础很重要. viewport 表示SVG可见区域的大小,或者可以想象成舞台大小,画布大小. <svg width="500" height="30 ...

  7. 移动端开发viewport深入理解(转)

    一.viewport的概念   移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,就是浏览器上用来显示网页的那部分区域,但viewport不局限于浏览器可视区域 的大小,它 ...

  8. 记lrd的高二上学期第五次调研考试

    河北某某中学的调研考试其实是很好玩的经历呢.可惜没有太多机会了. 背景: NOIP2016回来之后没有好好学文化课-.自习能翘就翘了,衡中特产学案自助没有好好写(说来我好像从来没被老师查到过,上课写学 ...

  9. 移动前端开发之viewport的深入理解

    在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或 ...

随机推荐

  1. ES6——字符串

    1.多了两个方法       1)startsWith       2)endsWith 2.模板字符串(`..`)—— 方便字符串连接   `反单引号        1)可以直接把表达式塞进去 &a ...

  2. rsync之expect脚本shell

    r_expect.sh: #!/bin/expect -f set timeout 30 #spawn rsync -avz --delete --exclude-from=exclude.list ...

  3. Django 使用简单笔记

    1. Django项目的启动: 1. 命令行启动 在项目的根目录下(也就是有manage.py的那个目录),运行: python3 manage.py runserver IP:端口--> 在指 ...

  4. 非阻塞套接字与IO多路复用(转,python实现版)

    非阻塞:指在不能立刻得到结果之前,该函数不会阻塞当前线程,而会立刻返回.epoll工作在非阻塞模式时,才会发挥作用. 我们了解了socket之后已经知道,普通套接字实现的服务端的缺陷:一次只能服务一个 ...

  5. 【串线篇】数据库设计之加谈n-n

    // n-n即(1-n)+(n-1): // 1-n:n-1:n-n:外键应该放在哪个表? //结论: //一对n:外键一定放在n的一端:别让一个人去记14亿,而让大家只记一个习大大 //n-n:”中 ...

  6. ElasticSearch 单台服务器部署多个节点

    转载:https://www.cnblogs.com/wxw16/p/6160186.html 一般情况下单台服务器只会部署一个ElasticSearch node,但是在学习过程中,很多情况下会需要 ...

  7. [BZOJ1023][SHOI2008]cactus仙人掌图 DP

    题目链接 套路就是先考虑一般的树上做法.求直径的dp的做法大家应该都会吧. 那么设\(dp[i]\)表示\(i\)的子树中的点到\(i\)的最大距离. 在dp的过程中 \[ ans=\max\{dp[ ...

  8. 剑指Offer-51.构建乘积数组(C++/Java)

    题目: 给定一个数组A[0,1,...,n-1],请构建一个数组B[0,1,...,n-1],其中B中的元素B[i]=A[0]*A[1]*...*A[i-1]*A[i+1]*...*A[n-1].不能 ...

  9. centos 6.5 切换用户

    root --> user,无需密码 su username user --> root,需要 root 密码 su root root 可省略

  10. boost bimap

    The library Boost.Bimap is based on Boost.MultiIndex and provides a container that can be used immed ...