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. linux系统使用和优化的原则

  2. 312-金胜维 P系列2.5寸 480G SATA3 SSD固态硬盘

    金胜维 P系列2.5寸 480G SATA3 SSD固态硬盘 一.概述     P系列为KingSpec金胜维针对入门级消费群体推出的一款高性价SSD固态硬盘,采用7mm超薄金属冲压外壳,板载优质TL ...

  3. C# 生成word文档(NPOI.XWPF)

    一.基础 1.创建Word using NPOI.XWPF.UserModel XWPFDocument doc = new XWPFDocument(); //创建新的word文档 XWPFPara ...

  4. 毕设问题(2) fastjson 的过滤器使用(SSH hibernate)以及转换对象出现 $ref

    毕业设计,用SSH框架,但是想要做出异步请求数据的效果,使用了ajax方式,其中数据传递的类型为json.ajax使用用的jQuery的ajax.其实struts里也支持ajax功能,但是我觉得用太多 ...

  5. Vue的计算属性缓存和method的区别在哪?

    一.先看一个例子 <div id="example"> {{ message.split('').reverse().join('') }} </div> ...

  6. 解决js ajax跨越请求 Access control allow origin 异常

    // 解决跨越请求的问题 response.setHeader("Access-Control-Allow-Origin", "*");

  7. day17 python re模块 简易爬虫

    day17 python   一.re模块     1.re模块的基础方法         查找findall() import re #re.findall(pattern,string,flags ...

  8. 如何在Ubuntu 18.04上安装Apache Web服务器

    一. apt库安装 1.在终端输入更新检查命令,sudo apt-get update 2. 在更新完成后(如果不想检查更新,也可直接输入此步)输入:sudo apt-get install apac ...

  9. Python 把字符串变成浮点数

    from functools import reducedi = {}di.update(zip('1234567890.', [1,2,3,4,5,6,7,8,9,0,'.'])) def str2 ...

  10. 51nod 1253:Kundu and Tree(组合数学)

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1253 所有的三元组的可能情况数有ans0=C(n,3).然后 ...