meta的作用
一、先明白几个概念
phys.width:
device-width:
一般我们所指的宽度width即为phys.width,而device-width又称为css-width。
其中我们可以获取phys.width即width通过document.documentElement.clientWidth;而获取css-width通过 window.screen.width获取。如iphone6的phys.width为750px,而css-width为375px。
二、
明白一个浏览器默认行为。
试想,浏览器如果把电脑端的980px的网页展现在宽度为750px的iphone6手机屏上,势必会放不下,手机端横向会出现滚动条,怎么阻止这种情况呢,很简单,浏览器默认一个虚拟窗口,不同浏览器有不同的虚拟窗口宽度的默认值如:safari iphone:980px;
opera:850px; Andriod webkit:800px;IE:974px;然后会把这个980px虚拟窗口装进宽度为750px的iphone6中,当然这样的话必须缩放,这就是为什么在手机中展现电脑端页面没有出现横向滚动条,而且字迹明显变小的原因。
三、讲解meta name= viewport content= width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1
meta标签中,width有两个含义,第一、width为phys.width,第二,width也为虚拟窗口的width。这样就会有两个结果:
第一、此时的iPhone6的phys.width也变成了css-width即375px,我们可以通过document.documentElement.clientWidth获取得到此时phys.width确实为375px。
第二、如你设计的是375px的手机端页面,此时的虚拟窗口的宽度也为375px,再装进phys.width为375px的手机,当然如设计稿一样的效果,不会缩放,也不会出现横向滚动条。
四、对响应式布局,媒体查询的影响
@media only screen and (min-width: 350px) and (max-width: 480px){.....................}
如没有meta标签,此时的width当然即为phys.width,iPhone6就不会执行上边的括号里边的代码,但是有了meta标签以后呢,width变成了css-width,即为375px,,所以是会执行代码的。
五、论meta标签的影响
从上边可以看出,有了meta标签以后,原本的iPhone6,即像素比为2的手机,可以按照css-width相同的像素比为1的手机一样正常显示,像素比更高的手机也能正常显示。当然现在andriod的2K屏在meta标签的帮助下也能正常显示。即对于开发者来说,已经可以不管手机的像素比,只需按照css像素编写代码即可。
meta的作用的更多相关文章
- [转]移动web开发中meta标签作用
今天在尝试做移动页面的时候遇到了一个问题,<meta content="telephone=no,email=no" name="format-detection& ...
- 移动端开发的meta标签作用
一.<meta name="viewport" id="viewport" content="width=device-width, initi ...
- 页面的缓存设置与meta的作用详细解释
网上转的,来自JSP的,但是原理大同小异哦,有时间 写个asp.net版的 HTML的HTTP协议头信息中控制着页面在几个地方的缓存信息,包括浏览器端,中间缓存服务器端(如:squid等),Web服务 ...
- HTML中meta标签作用及属性总结
在前端开发中编写html静态网页模板时,head标签内总是会带上许多meta标签,大多数时候并不十分了解这些标签的具体作用,只是别人写了我们也写上吧! 今天小编特意查询了一下关于网页中meta标签的作 ...
- meta 的作用 搜集
Meta标签中的format-detection属性及含义 format-detection翻译成中文的意思是“格式检测”,顾名思义,它是用来检测html里的一些格式的,那关于meta的forma ...
- html页面中meta的作用
meta是用来在HTML文档中模拟HTTP协议的响应头报文.meta 标签用于网页的<head>与</head>中,meta 标签的用处很多.meta 的属性有两种:name和 ...
- HTML 中 META的作用
说明: meta是用来在HTML文档中模拟HTTP协议的响应头报文.meta 标签用于网页的<head>与</head>中,meta 标签的用处很多.meta 的属性有两种:n ...
- JSP标签<meta>的作用
meta标签: meta标签共有两个属性,它们分别是http-equiv属性和name属性. name 属性 :<meta name="Generator" contect= ...
- html meta标签作用
1.概要 标签提供关于HTML文档的元数据.元数据不会显示在页面上,但是对于机器是可读的.它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他web服务. 必要属性: conten ...
- JSP标签 <meta> 的作用
meta标签: meta标签共有两个属性,它们分别是http-equiv属性和name属性. name 属性 : <meta name="Generator" contect ...
随机推荐
- c++快读与快输模板
快读 inline int read() { ; ; char ch=getchar(); ; ch=getchar();} )+(X<<)+ch-'; ch=getchar();} if ...
- Elasticsearch系列---实战零停机重建索引
前言 我们使用Elasticsearch索引文档时,最理想的情况是文档JSON结构是确定的,数据源源不断地灌进来即可,但实际情况中,没人能够阻拦需求的变更,在项目的某个版本,可能会对原有的文档结构造成 ...
- proxy应用场景
//场景一:可以修改对象的值let o = { name: 'xiaoming', price: 190 } let d = new Proxy(o,{ get (target,key){ if(ke ...
- 现在啊还不太清楚 nodejs和coffeescript 的关系
我怎么会思考这个问题,今天看到用coffeescript做的一个服务引导 挺好 看博客里提 安装node之后 呢 npm 可以安装coffeescript 难道 coffee 是 node的 一个方言 ...
- POJ Expanding Rods
点击打开题目 题目大意 给定L,n,C,L为红色线段,L(1+n*C)为绿色弧,求两者中点的距离 二分圆心角度数,接下来就是几何的能力了 根据正弦定理,可得: Lsinθ=rsin(90°−θ) 则弧 ...
- Lobooi第二次作业:熟悉使用工具
第二次作业 GIT地址 https://github.com/Lobooi//AchaoCalculator GIT用户名 Lobooi 学号后五位 24235 博客地址 https://home.c ...
- Nginx code 状态码说明
最近了解下Nginx的Code状态码,在此简单总结下. 先来再回顾一下一个http请求处理流程: 一个普通的http请求处理流程,如上图所示: A -> client端发起请求给nginx B ...
- js---描述链表
js描述链表 有些情况下js的数组结构在实际使用中速度很慢,此时可以考虑用链表来代替它: //链表类 function Node(element){ this.element=element; thi ...
- 关于STM32串口接收中断中只能接收一个字节
最近调试STM32的串口接收时发现例程中只能接收一个字节 例程如下: //初始化串口1 void uart_init(u32 bound){ //GPIO端口设置 GPIO_InitTypeDef G ...
- Git详解之分布式应用
前言 为了便于项目中的所有开发者分享代码,我们准备好了一台服务器存放远程 Git 仓库.经过前面几章的学习,我们已经学会了一些基本的本地工作流程中所需用到的命令.接下来,我们要学习下如何利用 Git ...