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 ...
随机推荐
- 【阿里云IoT+YF3300】11.物联网多设备快速通信级联
我们见到的很多物联网设备,大都是“一跳”上网,所谓的“一跳”就是设备直接上网,内嵌物联网模块或者通过DTU直接上网.其实稍微复杂的物联网现场,往往网关下面连接若干物联网设备(如下图),并且这些物联网设 ...
- extract函数的使用
EXTRACT(field FROM source) extract函数从日期/时间数值里抽取子域,比如年.小时等. source必须是一个timestamp, time, interval类型的值表 ...
- Linux上的Tomcat地址映射,且404错误解决
问题:现在想要加一个下载文件功能,但是文件地址不在tomcat的webapps下,需要通过地址映射到tomcat下面再通过链接执行下载文件功能. 解决方法有两种: 方法一: 用方法一的前提是不用启动服 ...
- 第五篇:python购物车小程序开发demo
功能:自定义工资水平,可选商品加购余额实时提醒用到的知识点:列表.if多分支.循环.高亮输出未解决bug删除商品后不能自动退出 代码如下: if shopping_list: shopping_lis ...
- Python思维导图(二)—— 数据类型
============================================== =========可点击图片, 放大查看更清晰哦!========= ===========有任何错误请及 ...
- LeetCode 第20题--括号匹配
1. 题目 2.题目分析与思路 3.代码 1. 题目 给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效. 有效字符串需满足: 左括号必须用相同类型的右括号闭 ...
- ORM基础1
1.增删改查 .models.类.object.all() 获取所有对象->select * from 表 2.models.类.object.get(id=1) 获取id为1的对象->s ...
- [bzoj4872] [洛谷P3750] [六省联考2017] 分手是祝愿
Description Zeit und Raum trennen dich und mich. 时空将你我分开. \(B\) 君在玩一个游戏,这个游戏由 \(n\) 个灯和 \(n\) 个开关组成, ...
- 深入浅出| java中的clone方法
每天进步一丢丢,连接梦与想 我们还年轻,但这不是你浪费青春的理由 克隆和复制 clone,有人称之为克隆,有人称之为复制,其实都是同一个东西 本文称之为"克隆",毕竟人家方法名叫& ...
- GeoGebra学习-lesson1
我曾经想过学习数学的时候总觉得不太直观,希望通过直观的图形来直观的学习数学.庆幸的是,在B站看视频时看到了妈咪叔使用了这款数学软件,很好用的样子.就去简单的了解了一下,下面是摘抄自<Geogeb ...