HTML中meta=“viewport”的介绍
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”的介绍的更多相关文章
- html的meta总结,html标签中meta属性使用介绍(转)
html的meta总结,html标签中meta属性使用介绍 2014年11月5日 5928次浏览 引子 之前的我的博客中对于meta有个介绍,例如:http://www.haorooms.com/po ...
- html的meta总结,html标签中meta属性使用介绍
引用:http://www.haorooms.com/post/html_meta_ds 前言 meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta ...
- html标签中meta属性使用介绍
前言 meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用 ...
- HTML中meta标签作用及属性总结
在前端开发中编写html静态网页模板时,head标签内总是会带上许多meta标签,大多数时候并不十分了解这些标签的具体作用,只是别人写了我们也写上吧! 今天小编特意查询了一下关于网页中meta标签的作 ...
- HTML Meta标签中的viewport属性含义及设置
两篇文章 第1篇文章 第2篇文章 http://blog.hexu.org/archives/1947.shtml 随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移 ...
- ExtJs 中Viewport的介绍与使用
ExtJs 中Viewport的介绍与使用 VeiwPort 代表整个浏览器显示区域,该对象渲染到页面的body 区域,并会随着浏览器显示区域的大小自动改变,一个页面中只能有一个ViewPort 实例 ...
- 我刚知道的WAP app中meta的属性
之前我一直做的都是WEB前端开发,来北京以后面试了一个移动前端开发,WAP前端开发. 其实在原来公司的时候也做过这方面的开发,可面试的时候面试官问我,要想强制让文档与设备的宽度保持1:1,mate标签 ...
- HTML中<meta>标签如何正确使用
HTML中<meta>标签如何正确使用 如果我们在浏览器中按下F12或者Ctrl+shift+J,便可以打开开发者工具,在element中即可看到<head>元素中有不少< ...
- HTML meta viewport属性详细说明
viewport并非只是ios上的独有属性,在android.winphone上同样也有viewport,下面为大家详细介绍下HTML meta viewport 什么是Viewport 手机浏览器是 ...
随机推荐
- ubuntu安装软件apt-get
一. apt-get用法 apt 0.8.16~exp12ubuntu10.26 for i386 compiled on Aug 5 2015 19:06:21Usage: apt-get [op ...
- FlowNet2.0论文笔记
原论文标题:FlowNet 2.0: Evolution of Optical Flow Estimation with Deep Networks 文章是对FlowNet的进一步改进,主要贡献为如下 ...
- kubernetes之NFS动态提供Kubernetes后端存储卷
StorageClass作为对存储资源的抽象定义, 对用户设置的NFS申请屏蔽后端存储的细节, 一方面减少了用户对于存储资源细节的关注, 另一方面减轻了管理员手工管理pv的工作, 由系统自动完成pv的 ...
- Hadoop_08_客户端向HDFS读写(上传)数据流程
1.HDFS的工作机制: HDFS集群分为两大角色:NameNode.DataNode (Secondary Namenode) NameNode负责管理整个文件系统的元数据 DataNode 负责管 ...
- MySQL查询数据库中所有数据表的数据条数
select table_name,table_rows from information_schema.tables where TABLE_SCHEMA = '数据库名称' order by ta ...
- Ubuntu18.04安装 NVIDIA驱动
Ubuntu18.04安装 NVIDIA驱动 参考自博客:https://blog.csdn.net/jsjason1/article/details/88086904 我确定这篇文章是否很有必要,我 ...
- View相关面试问题-ListView缓存面试问题讲解
什么是ListView: ListView就是一个能数据集合以动态滚动的方式显示在用户界面上的View. ListView适配器模式: 有了Adapter可以将数据源与view进行分离~ ListVi ...
- vs调试时,不显示局部变量
为了测试一个函数的返回值,就在某个函数里加了一个局部变量,调试却不显示所添加变量的信息. 你一定设置成了release 模式.改为debug就可以了. 比较弱智的问题,mark一下.
- FastDFS分布式图片服务器搭建
一:Fastdfs简介 1. 什么是FastDFS FastDFS 是用 c 语言编写的一款开源的分布式文件系统.FastDFS 为互联网量身定制, 充分考虑了冗余备份.负载均衡.线性扩容等机制,并注 ...
- 部署jenkins+git
Jenkins简介 Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能 安装并启动思路: 安装准备 ...