自适应布局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 相关文章推荐
jquery attr 设定src中含有&(宏)符号问题的解决方法
Jul 26 Javascript
javascript suggest效果 自动完成实现代码分享
Feb 17 Javascript
JS清空多文本框、文本域示例代码
Feb 24 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
Jun 06 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
Mar 10 Javascript
jQuery电话号码验证实例
Jan 05 Javascript
JavaScript中重名的函数与对象示例详析
Sep 28 Javascript
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
Jan 16 Javascript
vue组件实现可搜索下拉框扩展
Oct 23 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
Oct 02 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
Apr 15 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
Linux下将excel数据导入到mssql数据库中的方法
2010/02/08 PHP
基于ubuntu下nginx+php+mysql安装配置的具体操作步骤
2013/04/28 PHP
跨浏览器PHP下载文件名中的中文乱码问题解决方法
2015/03/05 PHP
Yii2实现中国省市区三级联动实例
2017/02/08 PHP
ThinkPHP实现的rsa非对称加密类示例
2018/05/29 PHP
javascript 命名空间以提高代码重用性
2008/11/13 Javascript
JQuery 插件制作实践 xMarquee插件V1.0
2010/04/02 Javascript
jquery实现input输入框实时输入触发事件代码
2014/01/28 Javascript
JQuery实现展开关闭层的方法
2015/02/17 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
2016/06/03 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
2016/10/09 Javascript
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
vue2项目使用sass的示例代码
2017/06/28 Javascript
JS实现点击链接切换显示隐藏内容的方法
2017/10/19 Javascript
前端MVVM框架解析之双向绑定
2018/01/24 Javascript
详解node.js 下载图片的 2 种方式
2018/03/02 Javascript
详解Vue实战指南之依赖注入(provide/inject)
2018/11/13 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
2019/04/29 Javascript
javascript实现滚轮轮播图片
2020/12/13 Javascript
[01:14:30]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第二场 8.20.mp4
2019/08/22 DOTA
python不带重复的全排列代码
2013/08/13 Python
python脚本替换指定行实现步骤
2017/07/11 Python
解决csv.writer写入文件有多余的空行问题
2018/07/06 Python
python实现转盘效果 python实现轮盘抽奖游戏
2019/01/22 Python
在python中使用pyspark读写Hive数据操作
2020/06/06 Python
Python3使用tesserocr识别字母数字验证码的实现
2021/01/29 Python
运动会四百米广播稿
2014/01/19 职场文书
办公室人员先进事迹
2014/01/27 职场文书
服装创业计划书范文
2014/02/05 职场文书
采购助理岗位职责
2014/02/16 职场文书
领导干部作风整顿个人剖析材料
2014/10/11 职场文书
同事打架检讨书
2015/05/06 职场文书
签字仪式主持词
2015/07/03 职场文书
2016中考冲刺决心书
2015/09/22 职场文书
2019年浪漫婚礼证婚词
2019/06/27 职场文书
动画《平凡职业成就世界最强》宣布制作OVA
2022/04/01 日漫