一、先明白几个概念

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的作用的更多相关文章

  1. [转]移动web开发中meta标签作用

    今天在尝试做移动页面的时候遇到了一个问题,<meta content="telephone=no,email=no" name="format-detection& ...

  2. 移动端开发的meta标签作用

    一.<meta name="viewport" id="viewport" content="width=device-width, initi ...

  3. 页面的缓存设置与meta的作用详细解释

    网上转的,来自JSP的,但是原理大同小异哦,有时间 写个asp.net版的 HTML的HTTP协议头信息中控制着页面在几个地方的缓存信息,包括浏览器端,中间缓存服务器端(如:squid等),Web服务 ...

  4. HTML中meta标签作用及属性总结

    在前端开发中编写html静态网页模板时,head标签内总是会带上许多meta标签,大多数时候并不十分了解这些标签的具体作用,只是别人写了我们也写上吧! 今天小编特意查询了一下关于网页中meta标签的作 ...

  5. meta 的作用 搜集

    Meta标签中的format-detection属性及含义   format-detection翻译成中文的意思是“格式检测”,顾名思义,它是用来检测html里的一些格式的,那关于meta的forma ...

  6. html页面中meta的作用

    meta是用来在HTML文档中模拟HTTP协议的响应头报文.meta 标签用于网页的<head>与</head>中,meta 标签的用处很多.meta 的属性有两种:name和 ...

  7. HTML 中 META的作用

    说明: meta是用来在HTML文档中模拟HTTP协议的响应头报文.meta 标签用于网页的<head>与</head>中,meta 标签的用处很多.meta 的属性有两种:n ...

  8. JSP标签<meta>的作用

    meta标签: meta标签共有两个属性,它们分别是http-equiv属性和name属性. name 属性 :<meta name="Generator" contect= ...

  9. html meta标签作用

    1.概要 标签提供关于HTML文档的元数据.元数据不会显示在页面上,但是对于机器是可读的.它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他web服务. 必要属性: conten ...

  10. JSP标签 <meta> 的作用

    meta标签: meta标签共有两个属性,它们分别是http-equiv属性和name属性. name 属性 : <meta name="Generator" contect ...

随机推荐

  1. Jmeter+Jenkins 搭配进行接口测试

    单纯通过Jmeter的界面进行Web的接口测试,效率低下.为此将Jmeter的接口测试与Jenkins联合,实现持续集成.配置完成后,只需修改运行的Jmeter脚本即可,运行结束后测试结果发送到指定邮 ...

  2. 通过httpClient设置代理Ip

    背景: 我们有个车管系统,需要定期的去查询车辆的违章,之前一直是调第三方接口去查,后面发现数据不准确(和深圳交警查的对不上),问题比较多.于是想干脆直接从深圳交警上查,那不就不会出问题了吗,但是问题又 ...

  3. JS中使用FormData上传图片

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...

  4. Ansible配合Virtualenv安装配置

    Ansible的两种安装模式(Centos7) 1.Yum包管理安装 #yum -y install ansible 2.Git源代码安装[推荐] git clone https://github.c ...

  5. eclipse git导入的项目 让修改后的文件带有黑色星标记样式

    操作方式:Window——>Preferences——>Team——>Git——>Label Decorations——>Icon Decorations 将 Dirty ...

  6. 使用read、readline、readlines和pd.read_csv、pd.read_table、pd.read_fwf、pd.read_excel获取数据

    从文本文件读取数据 法一: 使用read.readline.readlines读取数据 read([size]):从文件读取指定的字节数.如果未给定或为负值,则去取全部.返回数据类型为字符串(将所有行 ...

  7. 为什么Mozilla Thunderbird无法登陆腾讯企业邮?

    (一)问题描述 登陆腾讯企业邮提示"无法登录到服务器.可能是配置.用户名或者密码错误." (二)解决方案 手动配置 IMAP | imap.exmail.qq.com | 993 ...

  8. 基于事件的网关 Event­based Gateway

    基于事件的网关 Event­based Gateway 作者:Jesai 时间:2018年4月21日 21:19:30 什么是事件网关? 基于事件的网关,允许基于事件做选择. 事件网关的执行原理? 网 ...

  9. AVR单片机教程——UART进阶

    本文隶属于AVR单片机教程系列.   在第一期中,我们已经开始使用UART来实现单片机开发板与计算机之间的通信,但只是简单地讲了讲一些概念和库函数的使用.在这一篇教程中,我们将从硬件与软件等各方面更深 ...

  10. 【杂项】各类文件头结合winhex使用-转载

    ———常用文件头——— JPEG (jpg),文件头:FFD8FFE1 PNG (png),文件头:89504E47 (0D0A1A0A) GIF (gif),文件头:47494638 ZIP Arc ...