＜meta＞＜/meta＞设置
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"/>
width=device-width ：表示宽度是设备屏幕的宽度
initial-scale=1.0：表示初始的缩放比例
minimum-scale=0.5：表示最小的缩放比例
maximum-scale=2.0：表示最大的缩放比例
user-scalable=yes：表示用户是否可以调整缩放比例
如果是想要一打开网页，自动以原始比例显示，并且不允许用户修改的话，则是：
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
ps：将比例都改为1,即可。
一。分类（三种）
layout viewport ：那些为桌面设计的网站也能在移动浏览器上正常显示的宽度（这是浏览器的一个默认值）
visual viewport ：浏览器可视区域的大小
ideal viewport：能完美适配移动设备的viewport。即不需要用户缩放和横向滚动条就能正常的查看网站的所有内容，显示的文字的大小是合适的。
PC页面在手机缩放原因：
1. iphon4默认的viewport 980px , user-scalable=yes
2.那么initial-scale 在320px的浏览器上 就是320/980 即0.33333
<meta name="viewport" content="width=device-width,meta标签作用：让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。
meta viewport 中的content有6个属性,如下：
PS：多个属性同时使用时用逗号隔开。
三。得到ideal viewport——>默认的 layout viewport的宽度 = 移动设备的屏幕宽度
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1">
上面两句代码的功能一样，都可以可以把当前的的viewport变为 ideal viewport。
**PS：深入理解缩放 ： 缩放是相对于 ideal viewport来进行缩放的 。因此缩放值为1的时候，就得到了 ideal viewport 。
缩放值越大，当前viewport的宽度就会越小。
当前缩放值 = ideal viewport宽度 / visual viewport宽度 （安卓上的原生浏览器以及IE有些问题）
**PS：width 和 initial-scale=1 同时出现，且出现了冲突时，浏览器会取它们两个中较大的那个值。但是事情并不都是完美的，总有个别奇葩的出现，比如uc9。在uc9浏览器中，当initial-scale=1时，无论width属性的值为多少，此时viewport的宽度永远都是ideal viewport的宽度。
总结 ： 把当前的viewport宽度设为ideal viewport的宽度，既可以设置 width=device-width，也可以设置 initial-scale=1，但这两者各有一个小缺陷，就是iphone、ipad以及IE 会横竖屏不分，通通以竖屏的ideal viewport宽度为准。
最完美的写法应该是
<meta name="viewport" content="width=device-width, initial-scale=1">
initial-scale=1 解决了 iphone、ipad的毛病，width=device-width则解决了IE的毛病。
一个标准的移动web页面 如下：
<meta name="viewport" content="width=device-width, initial-scale=1，user-scalable=0">
四。有一个小小的注意点：
在iphone和ipad上，无论你给viewport设的宽的是多少，如果没有指定默认的缩放值，则iphone和ipad会自动计算这个缩放值，以达到当前页面不会出现横向滚动条(或者说viewport的宽度就是屏幕的宽度)的目的。
五。动态改变meta viewport标签（两种办法）
1.使用 document.write 来动态输出 meta viewport
document.write('<meta name="viewport" content="width=device-width,initial-scale=1">')
2.通过 setAttribute 来改变
<meta id="testViewport" name="viewport" content="width = 380">
<script>
var mvp = document.getElementById('testViewport');
mvp.setAttribute('content','width=480');
</script>
注意：在这里还是有一个奇葩的出现，安卓2.3。安卓2.3自带浏览器上的一个 bug，对 meta viewport 标签进行覆盖或更改，会出现一个迷之结果，无法预测。
---------------------
作者：ferrysoul
来源：CSDN
原文：https://blog.csdn.net/ferrysoul/article/details/81231199
版权声明：本文为博主原创文章，转载请附上博文链接！
＜meta＞＜/meta＞设置相关推荐
- 使用vue-router的meta实现 设置每个页面的title标题
1.实现效果(左上角title变化) 2.核心代码: 1.这里主要是 meta 属性下面设置一个自定义的键值 title 2.在前置导航守卫里面如下: router.beforeEach((to,fr ...
- 【移动端适配 视口viewport】移动端meta属性设置的理想视口是什么
1.看一下我的代码 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
- SEO基本之KTD与meta标签设置
文章目录 meta标签 TKD 写法一般规则 meta元数据og与OG协议 meta元数据robots 使用总结: meta标签 表示文档级元数据元素,简单来说就是描述网页数据的数据,有四种类型 na ...
- meta标签设置用极速模式打开网页
1 浏览器集成了多种浏览器内核,需要强制使用极速模式 <meta name="renderer" content="webkit" /> 2 met ...
- vue修改meta值_vue中动态设置meta标签和title标签的方法
vue中动态设置meta标签和title标签的方法 因为和原生的交互是需要h5这边来提供meta标签的来是来判断要不要显示分享按钮,所有就需要手动设置meta标签,标题和内容 //router内的设置 ...
- asp.net mvc 利用过滤器进行网站Meta设置
过去几年都是用asp.net webform进行开发东西,最近听说过时了,同时webform会产生ViewState(虽然我已经不用ruanat=server的控件好久了 :)),对企业应用无所谓,但 ...
- SEO优化之meta标签
2019独角兽企业重金招聘Python工程师标准>>> meta的标签的使用是我在前端学习中曾经困惑过一段时间的问题.一方面不是很了解meta标签的用途,另一方面是对于meta标签里 ...
- HTML Meta中添加X-UA-Compatible和IE=Edge,chrome=1有什么作用？
X-UA-Compatible是自从IE8新加的一个设置,对于IE8以下的浏览器是不识别的. 通过在meta中设置X-UA-Compatible的值,可以指定网页的兼容性模式设置. 在网页中指定的模式 ...
- html的meta总结，html标签中meta属性使用介绍和 动态替换字符串
http://www.haorooms.com/post/html_meta_ds http://www.haorooms.com/archives里面的东西比较多,需要细看一下 http://www ...
最新文章
- Win8 Metro(C#)数字图像处理--2.52图像K均值聚类
- fastReport 随记
- 怎么才能转入大数据领域 ，成为一名合格的大数据分析师...
- 分布式ID生成器（来源：架构师之路，2017-06-25 58沈剑 架构师之路）
- Deeplearnng.AI第四部分第一周、卷积神经网络
- 【简洁易懂】Filter的四种拦截方式
- 【OpenCV 例程200篇】17. 两张图像的渐变切换
- 详尽解读中美科技差距究竟多么巨大
- ANSYS 有限元分析 网格划分
- 直播APP源码，视频直播技术篇 。
- Python金融行业必备工具
- 求顺序表的交集和并集
- oracle 天转换成月函数_oracle日期函数，转换函数
- ImageView中动态设置图片
- nginx + uwsgi 搭建PYHTON web应用
- 使用adb查看手机中包含中文的目录或者文件（中文乱码问题）。
- 边界层积分方程与马兰格尼效应
- 以下说法正确的是。（选择2项）
- 计算机管理培训考试试题,计算机技能培训试题一
- 【人脸】人脸矫正相关知识