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标签的使用,才能更好地让我们的网页适配或 ...
随机推荐
- linux系统使用和优化的原则
- 312-金胜维 P系列2.5寸 480G SATA3 SSD固态硬盘
金胜维 P系列2.5寸 480G SATA3 SSD固态硬盘 一.概述 P系列为KingSpec金胜维针对入门级消费群体推出的一款高性价SSD固态硬盘,采用7mm超薄金属冲压外壳,板载优质TL ...
- C# 生成word文档(NPOI.XWPF)
一.基础 1.创建Word using NPOI.XWPF.UserModel XWPFDocument doc = new XWPFDocument(); //创建新的word文档 XWPFPara ...
- 毕设问题(2) fastjson 的过滤器使用(SSH hibernate)以及转换对象出现 $ref
毕业设计,用SSH框架,但是想要做出异步请求数据的效果,使用了ajax方式,其中数据传递的类型为json.ajax使用用的jQuery的ajax.其实struts里也支持ajax功能,但是我觉得用太多 ...
- Vue的计算属性缓存和method的区别在哪?
一.先看一个例子 <div id="example"> {{ message.split('').reverse().join('') }} </div> ...
- 解决js ajax跨越请求 Access control allow origin 异常
// 解决跨越请求的问题 response.setHeader("Access-Control-Allow-Origin", "*");
- day17 python re模块 简易爬虫
day17 python 一.re模块 1.re模块的基础方法 查找findall() import re #re.findall(pattern,string,flags ...
- 如何在Ubuntu 18.04上安装Apache Web服务器
一. apt库安装 1.在终端输入更新检查命令,sudo apt-get update 2. 在更新完成后(如果不想检查更新,也可直接输入此步)输入:sudo apt-get install apac ...
- Python 把字符串变成浮点数
from functools import reducedi = {}di.update(zip('1234567890.', [1,2,3,4,5,6,7,8,9,0,'.'])) def str2 ...
- 51nod 1253:Kundu and Tree(组合数学)
题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1253 所有的三元组的可能情况数有ans0=C(n,3).然后 ...