自适应布局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 相关文章推荐
网页常用特效代码整理
Jun 23 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
Jul 16 Javascript
一个通过script自定义属性传递配置参数的方法
Sep 15 Javascript
node.js中的fs.fchmod方法使用说明
Dec 16 Javascript
window.open()实现post传递参数
Mar 12 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
javascript常用正则表达式汇总
Jul 31 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
Feb 09 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
Dec 03 Javascript
Vue 幸运大转盘实现思路详解
May 06 Javascript
如何基于filter实现网站整体变灰功能
Apr 17 Javascript
关于React Native使用axios进行网络请求的方法
Aug 02 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
深入解析php之apc
2013/05/15 PHP
浅析PHP中的UNICODE 编码与解码
2013/06/29 PHP
php数组去重复数据示例
2014/02/25 PHP
PHP实现HTML生成PDF文件的方法
2014/11/07 PHP
php_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法
2014/12/15 PHP
JavaScript中的prototype使用说明
2010/04/13 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
2011/09/28 Javascript
Javascript改变CSS样式(局部和全局)
2013/12/18 Javascript
jQuery学习笔记之toArray()
2014/06/09 Javascript
轻松创建nodejs服务器(2):nodejs服务器的构成分析
2014/12/18 NodeJs
jQuery中大家不太了解的几个方法
2015/03/04 Javascript
cookie的secure属性详解
2015/04/08 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
JavaScript中cookie工具函数封装的示例代码
2016/10/11 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
2017/02/10 Javascript
Bootstrap一款超好用的前端框架
2017/09/25 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
2017/12/19 Javascript
vue+element的表格实现批量删除功能示例代码
2018/08/17 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
图文详解python安装Scrapy框架步骤
2019/05/20 Python
基于python实现学生信息管理系统
2019/11/22 Python
澳大利亚电子产品购物网站:Dick Smith
2017/02/02 全球购物
美国真皮手袋品牌:GiGi New York
2017/03/10 全球购物
5.12护士节演讲稿
2014/04/30 职场文书
社区春季防火方案
2014/06/02 职场文书
领导班子“四风问题”“整改方案
2014/10/02 职场文书
同意迁入证明模板
2014/10/26 职场文书
会议邀请函
2015/01/30 职场文书
兵马俑导游词
2015/02/02 职场文书
帝企鹅日记观后感
2015/06/10 职场文书
严以律己专题学习研讨会发言材料
2015/11/09 职场文书
如何做好员工培训计划?
2019/07/09 职场文书
nginx基于域名,端口,不同IP的虚拟主机设置的实现
2021/03/31 Servers
SQL语法CONSTRAINT约束操作详情
2022/01/18 MySQL
 Python 中 logging 模块使用详情
2022/03/03 Python
Mysql事务索引知识汇总
2022/03/17 MySQL