自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结


Posted in Javascript onAugust 18, 2017

一、先明白几个概念

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。这样就会有两个结果:

1、此时的iPhone6的phys.width也变成了css-width即375px,我们可以通过document.documentElement.clientWidth获取得到此时phys.width确实为375px。

2、如你设计的是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像素编写代码即可。

参考链接: https://3water.com/article/121531.htm     
参考链接:  https://3water.com/article/121524.htm

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持!

Javascript 相关文章推荐
js 字符串转化成数字的代码
Jun 29 Javascript
javascript数组去重3种方法的性能测试与比较
Mar 26 Javascript
MultiSelect左右选择控件的设计与实现介绍
Jun 08 Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 Javascript
javascript判断并获取注册表中可信任站点的方法
Jun 01 Javascript
js编写简单的聊天室功能
Aug 17 Javascript
关于Angularjs中跨域设置白名单问题
Apr 17 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
May 08 Javascript
浅谈Angular6的服务和依赖注入
Jun 27 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 Javascript
vue 实现根据data中的属性值来设置不同的样式
Aug 04 Javascript
three.js中多线程的使用及性能测试详解
Jan 07 Javascript
JS实现页面打印(整体、局部)
Aug 18 #Javascript
简单实现jQuery轮播效果
Aug 18 #jQuery
JavaScript编写的网页小游戏,很给力
Aug 18 #Javascript
ReactJs实现树形结构的数据显示的组件的示例
Aug 18 #Javascript
基于 Vue 的树形选择组件的示例代码
Aug 18 #Javascript
简单实现jQuery手风琴效果
Aug 18 #jQuery
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 #Javascript
You might like
数据库相关问题
2006/10/09 PHP
PHP导出MySQL数据到Excel文件(fputcsv)
2011/07/03 PHP
php让json_encode不自动转义斜杠“/”的方法
2020/04/27 PHP
xmlHTTP实例
2006/10/24 Javascript
js+FSO遍历文件夹下文件并显示
2007/03/07 Javascript
Notify - 基于jquery的消息通知插件
2011/10/18 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
2013/07/09 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
2013/11/21 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
jquery 设置style:display的方法
2015/01/29 Javascript
同一个网页中实现多个JavaScript特效的方法
2015/02/02 Javascript
jQuery使用元素属性attr赋值详解
2015/02/27 Javascript
JS实现控制表格内指定单元格内容对齐的方法
2015/03/30 Javascript
跟我学习javascript的undefined与null
2015/11/17 Javascript
three.js中文文档学习之创建场景
2017/11/20 Javascript
vue-cli webpack2项目打包优化分享
2018/02/07 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
2018/08/28 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
2019/06/17 Javascript
vue学习笔记之给组件绑定原生事件操作示例
2020/02/27 Javascript
JavaScript图片旋转效果实现方法详解
2020/06/28 Javascript
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
python使用socket创建tcp服务器和客户端
2018/04/12 Python
python 实现将txt文件多行合并为一行并将中间的空格去掉方法
2018/12/20 Python
布隆过滤器的概述及Python实现方法
2019/12/08 Python
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
一家专门经营包包的英国网站:MyBag
2019/09/08 全球购物
先进党支部事迹材料
2014/01/13 职场文书
教师批评与自我批评范文
2014/10/15 职场文书
2014幼儿园小班工作总结
2014/11/10 职场文书
2015新年寄语大全
2014/12/08 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书
商务信函英语问候语
2015/11/10 职场文书
详解CocosCreator项目结构机制
2021/04/14 Javascript
python 模拟在天空中放风筝的示例代码
2021/04/21 Python