viewport就是浏览器上用来显示网页的那部分区域

  • layout viewport:整个网页所占据的区域(包括可视也包括不可视的区域)  默认的
  • visual viewport:网页在浏览器上的可视区域(浏览器中能够看见的区域)
  • ideal viewport:ideal viewport是一个能完美适配移动设备的viewport(没有固定尺寸,就是屏幕的宽度)

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />

layout viewport是默认的,但是由于移动设备比pc端的可视区域小,所以当页面在移动设备上时,字体会很小或出现横向滚动条。为解决此问题,一般会在head里加入代码:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

/*width=device-width能使所有浏览器当前的viewport宽度变成ideal viewport的宽度,initial-scale=1是将页面的初始缩放值设为1。*/

用来将viewport的宽度变成ideal viewport的宽度,防止横向滚动条出现。

  • width:设置layout viewport 的宽度,为一个正整数,或字符串”width-device”
  • initial-scale:设置页面的初始缩放值,为一个数字,可以带小数
  • minimum-scale:允许用户的最小缩放值,为一个数字,可以带小数
  • maximum-scale:允许用户的最大缩放值,为一个数字,可以带小数
  • height :设置layout viewport 的高度,这个属性对我们并不重
  • user-scalable:是否允许用户进行缩放,值为”no”或”yes”, no 代表不允许,yes代表允许

HTML中meta=“viewport”的介绍的更多相关文章

  1. html的meta总结,html标签中meta属性使用介绍(转)

    html的meta总结,html标签中meta属性使用介绍 2014年11月5日 5928次浏览 引子 之前的我的博客中对于meta有个介绍,例如:http://www.haorooms.com/po ...

  2. html的meta总结,html标签中meta属性使用介绍

    引用:http://www.haorooms.com/post/html_meta_ds 前言 meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta ...

  3. html标签中meta属性使用介绍

    前言 meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用 ...

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

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

  5. HTML Meta标签中的viewport属性含义及设置

    两篇文章 第1篇文章 第2篇文章 http://blog.hexu.org/archives/1947.shtml 随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移 ...

  6. ExtJs 中Viewport的介绍与使用

    ExtJs 中Viewport的介绍与使用 VeiwPort 代表整个浏览器显示区域,该对象渲染到页面的body 区域,并会随着浏览器显示区域的大小自动改变,一个页面中只能有一个ViewPort 实例 ...

  7. 我刚知道的WAP app中meta的属性

    之前我一直做的都是WEB前端开发,来北京以后面试了一个移动前端开发,WAP前端开发. 其实在原来公司的时候也做过这方面的开发,可面试的时候面试官问我,要想强制让文档与设备的宽度保持1:1,mate标签 ...

  8. HTML中<meta>标签如何正确使用

    HTML中<meta>标签如何正确使用 如果我们在浏览器中按下F12或者Ctrl+shift+J,便可以打开开发者工具,在element中即可看到<head>元素中有不少< ...

  9. HTML meta viewport属性详细说明

    viewport并非只是ios上的独有属性,在android.winphone上同样也有viewport,下面为大家详细介绍下HTML meta viewport 什么是Viewport 手机浏览器是 ...

随机推荐

  1. zookeeper配置文件说明

    zoo.cfg #zoo.cfg 的内容 # 心跳检查的时间 2秒 tickTime=2000 # 初始化时 连接到服务器端的间隔次数,总时间10*2=20秒 initLimit=10 # ZK Le ...

  2. 110G离线维基百科数据免费拿

    110G离线维基百科数据免费拿.. 资料获取方式,关注公总号RaoRao1994,查看往期精彩-所有文章,即可获取资源下载链接 更多资源获取,请关注公总号RaoRao1994

  3. postman安装时提示打不开

    安装postman6.6.1时,提示打不开,如下图: 解决办法: 1.找到以下两个路径直接删除文件,注安装路径不同有可能不同 C:\Users\Administrator\AppData\Roamin ...

  4. 【异常】Could not find artifact com.wm.****:

    1 详细异常 [ERROR] Failed to execute goal on project spark-etl: Could not resolve dependencies for proje ...

  5. vue中 localStorage的使用方法(详解)

    vue中实现本地储存的方法:localStorage,在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cooki ...

  6. UDS报文解读

    UDS(Unified Diagnostic Services,统一的诊断服务)诊断协议是ISO 15765 和ISO 14229 定义的一种汽车通用诊断协议,位于OSI模型中的应用层,它可在不同的汽 ...

  7. JAVA 从打包成jar到导入到IntelliJ IDEA使用

    一. 使用常用命令打包: jar -cvf 目标jar包名称 待打包路径 例:jar -cvf myjar.jar com/dn/Demo 二. 打开IntelliJ IDEA (2017.2版本) ...

  8. cubase 反向音频处理

  9. 远程文件传输工具sftp、scp、rsync

    一.scp 格式 scp [options] [user@]host : /sourcefile /destpathscp [options] /sourcefile [user@]host:/des ...

  10. kubernetes离线包安装教程

    kubernetes离线包安装教程: 安装包中不包含docker,如没装docker 请先安装之yum install -y docker 1 2 3 1. master上: cd shell &am ...