viewport的深入调研
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的深入调研的更多相关文章
- CMS模板应用调研问卷
截止目前,已经有数十家网站与我们合作,进行了MIP化改造,在搜索结果页也能看到"闪电标"的出现.除了改造方面的问题,MIP项目组被问到最多的就是:我用了wordpress,我用了织 ...
- CSharpGL(35)用ViewPort实现类似3DMax那样的把一个场景渲染到4个视口
CSharpGL(35)用ViewPort实现类似3DMax那样的把一个场景渲染到4个视口 开始 像下面这样的四个视口的功能是很常用的,所以我花了几天时间在CSharpGL中集成了这个功能. 在CSh ...
- 移动WEB开发之viewport
问题: 在codepen上写了一个响应式页面,调试的时候没有问题.结果放到网站上,在手机上打开之后竟然和在电脑中的布局是一样的. 查阅资料之后知道响应式布局应该有这样一句话:<m ...
- viewport理解
viewport预备知识 dpr === dppx dpr:device pixel ratio 设备像素比 dppx:Number of dots per px unit 每像素有多少点 . 1dp ...
- 移动WEB viewport 相关知识
了解移动web viewport的知识,主要是为了切图时心中有数.本文主要围绕一个问题:切图时怎样设置<meta name="viewport">相关参数?围绕这个问题 ...
- 理解SVG的viewport,viewBox,preserveAspectRatio
万丈高楼平地起,基础很重要. viewport 表示SVG可见区域的大小,或者可以想象成舞台大小,画布大小. <svg width="500" height="30 ...
- 移动端开发viewport深入理解(转)
一.viewport的概念 移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,就是浏览器上用来显示网页的那部分区域,但viewport不局限于浏览器可视区域 的大小,它 ...
- 记lrd的高二上学期第五次调研考试
河北某某中学的调研考试其实是很好玩的经历呢.可惜没有太多机会了. 背景: NOIP2016回来之后没有好好学文化课-.自习能翘就翘了,衡中特产学案自助没有好好写(说来我好像从来没被老师查到过,上课写学 ...
- 移动前端开发之viewport的深入理解
在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或 ...
随机推荐
- ES6——字符串
1.多了两个方法 1)startsWith 2)endsWith 2.模板字符串(`..`)—— 方便字符串连接 `反单引号 1)可以直接把表达式塞进去 &a ...
- rsync之expect脚本shell
r_expect.sh: #!/bin/expect -f set timeout 30 #spawn rsync -avz --delete --exclude-from=exclude.list ...
- Django 使用简单笔记
1. Django项目的启动: 1. 命令行启动 在项目的根目录下(也就是有manage.py的那个目录),运行: python3 manage.py runserver IP:端口--> 在指 ...
- 非阻塞套接字与IO多路复用(转,python实现版)
非阻塞:指在不能立刻得到结果之前,该函数不会阻塞当前线程,而会立刻返回.epoll工作在非阻塞模式时,才会发挥作用. 我们了解了socket之后已经知道,普通套接字实现的服务端的缺陷:一次只能服务一个 ...
- 【串线篇】数据库设计之加谈n-n
// n-n即(1-n)+(n-1): // 1-n:n-1:n-n:外键应该放在哪个表? //结论: //一对n:外键一定放在n的一端:别让一个人去记14亿,而让大家只记一个习大大 //n-n:”中 ...
- ElasticSearch 单台服务器部署多个节点
转载:https://www.cnblogs.com/wxw16/p/6160186.html 一般情况下单台服务器只会部署一个ElasticSearch node,但是在学习过程中,很多情况下会需要 ...
- [BZOJ1023][SHOI2008]cactus仙人掌图 DP
题目链接 套路就是先考虑一般的树上做法.求直径的dp的做法大家应该都会吧. 那么设\(dp[i]\)表示\(i\)的子树中的点到\(i\)的最大距离. 在dp的过程中 \[ ans=\max\{dp[ ...
- 剑指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].不能 ...
- centos 6.5 切换用户
root --> user,无需密码 su username user --> root,需要 root 密码 su root root 可省略
- boost bimap
The library Boost.Bimap is based on Boost.MultiIndex and provides a container that can be used immed ...