viewport原理和使用和设置移动端自适应的方法(移动适应电脑)
viewport原理和使用和设置移动端自适应的方法
HTML中:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
该meta标签的作用是让当前viewport的宽度等于设备的宽度,同时不允许用户手动缩放。当然maximum-scale=1.0, user-scalable=0不是必需的,是否允许用户手动播放根据网站的需求来定,但把width设为width-device基本是必须的,这样能保证不会出现横向滚动条。
meta viewport 的6个属性:
width: viewport宽度
height: viewport高度
initial-scale: 初始缩放比例
maximum-scale: 最大缩放比例
minimum-scale: 最小缩放比例
user-scalable: 是否允许用户缩放
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=yes">
对于这行代码我们是不是每次都得把这五个属性都写上呢?答案肯定是否定的,例如:如果你添加了user-scalable=no 那么,minimum-scale=1, maximum-scale=1这两个属性就没必要追加了。因为你都已经禁止了用户缩放页面了,允许的缩放范围也就不存在了。
//没必要追加minimum-scale=1, maximum-scale=1这两个属性了
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
3个viewport
(1)layout viewport——布局视窗
如果把移动设备上浏览器的可视区域设为viewport的话,某些网站会因为viewport太窄而显示错乱,所以这些浏览器就默认会把viewport设为一个较宽的值,比如980px,使得即使是那些为PC浏览器设计的网站也能在移动设备浏览器上正常显示。这个浏览器默认的viewport叫做 layout viewport。layout viewport的宽度可以通过 document.documentElement.clientWidth来获取。
(2)visual viewport——视觉视窗
layout viewport的宽度是大于浏览器可视区域的宽度的,所以还需要一个viewport来代表浏览器可视区域的大小,这个viewport叫做 visual viewport。visual viewport的宽度可以通过 document.documentElement.innerWidth来获取。
(3)ideal viewport——理想视窗
ideal viewport是一个能完美适配移动设备的viewport。首先,不需要缩放和横向滚动条就能正常查看网站的所有内容;其次,显示的文字、图片大小合适,如14px的文字不会因为在一个高密度像素的屏幕里显示得太小而无法看清,无论是在何种密度屏幕,何种分辨率下,显示出来的大小都差不多。这个viewport叫做 ideal viewport。
ideal viewport并没有一个固定的尺寸,不同的设备有不同的ideal viewport。例如,所有的iphone的ideal viewport宽度都是320px,无论它的屏幕宽度是320还是640。
ideal viewport 的意义在于,无论在何种分辨率的屏幕下,针对ideal viewport 而设计的网站,不需要缩放和横向滚动条都可以完美地呈现给用户。
viewport设置移动端自适应的方法:
<meta name="viewport" content="width=device-width, initial-scale=1">
viewport原理和使用和设置移动端自适应的方法(移动适应电脑)的更多相关文章
- 浅谈meta viewport设置移动端自适应
1.viewport 移动设备上的viewport是设备屏幕上用来显示网页的那部分区域,再具体一点就是浏览器上用来显示网页的那部分区域,但viewport又不局限于浏览器可视区域的大小,它可能比浏览器 ...
- hadoop运行原理之Job运行(四) JobTracker端心跳机制分析
接着上篇来说,TaskTracker端的transmitHeartBeat()方法通过RPC调用JobTracker端的heartbeat()方法来接收心跳并返回心跳应答.还是先看看这张图,对它的大概 ...
- PyCharm中设置console端的字体和大小
file--->setting,选择console Font,右侧primary font即设置console端的字体和大小
- 阶段3 1.Mybatis_07.Mybatis的连接池及事务_6 mybatis中的事务原理和自动提交设置
在实际的开发中,建议使用连接池的形式. JNDI的资料 H:\BaiDu\黑马传智JavaEE57期 2019最新基础+就业+在职加薪\讲义+笔记+资料\主流框架\31.会员版(2.0)-就业课(2. ...
- flexible.js 移动端自适应方案
一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https://github.com/amfe/ar ...
- 有了这套flexible.js 移动端自适应方案,你就能在移动端的来去自如, (*^__^*)
flexible.js 移动端自适应方案 一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https ...
- 移动端自适应之flexible
移动端自适应之flexible 作用:flexible的作用是使页面可以适配不同移动终端 原理:在页面html标签上添加style = "font-size: 36px;"样式,设 ...
- 如何解决PC端和移动端自适应问题?
做网页时,我们通常需要考虑到不同电脑屏幕尺寸,以及不同手机屏幕大小等问题,解决样式发生改变的情况,那么如何解决呢?现在主要是采用自适应来解决高度,宽度的,以及图片自适应问题,下面就PC端和移动端来总结 ...
- 使用rem设计移动端自适应页面三(转载)
使用rem 然后根据媒体查询实现自适应.跟使用JS来自适应也是同个道理,不过是js更精确一点.使用媒体查询: html { font-size: 62.5% } @media only screen ...
随机推荐
- Oracle 客户端、服务器、数据库、数据库对象(表、视图等)的关系
1.数据库服务器 所谓数据库服务器,只是在机器上安装了一个数据库管理软件,这个软件可以管理多个数据库.一般开发人员会针对每一个应用创建一个数据库 2.单实例数据库模式下的数据库服务器.数据库.数据库实 ...
- 移除“xmlns”命名空间
用XmlDocument创建一个文档,或者插入一个节点,默认会生成xmlns(命名空间)特性. 假定有一个xml文档如下结构: <?xml version="1.0" enc ...
- 【LDAP】ldap目录服务的命名模型
ldap的命名模型 命名模型规定了在目录中如何组织和表示条目 1. 目录信息树(DIT) 目录信息树有点类似于DNS的结构.每一个条目都有自己的父条目(因为主条目的父条目是top,所以这句话是成立 ...
- 使用Amoeba for mysql实现mysql读写分离(测试可行)
Amoeba for MySQL致力于MySQL的分布式数据库前端代理层,它主要在应用层访问MySQL的时候充当query 路由功能,专注 分布式数据库 proxy 开发.座落与Client.DB S ...
- poj 1080 ——Human Gene Functions——————【最长公共子序列变型题】
Human Gene Functions Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 17805 Accepted: ...
- BNU4286——Adjacent Bit Counts——————【dp】
Adjacent Bit Counts Time Limit: 1000ms Memory Limit: 65536KB 64-bit integer IO format: %lld Jav ...
- js 常用事件句柄总结
HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时启动一段 JavaScript.下面是一个属性列表,这些属性可插入 HT ...
- Javaweb的get请求乱码解决
get方式请求:即将参数放在URL中,因此这就涉及到URL的编码了 方式一:[推荐] 方式二: 前端编码: encodeURI(encodeURI("")) 后端解码: java. ...
- OpenLayers 3 实现划线,画点
//划线 this.drawLine = function (type) { //清除双击放大效果 this.map.getInteractions().item(1).setActive(false ...
- 不同线程不能获取其他线程设置的ThreadLocal里面的值
背景: 最近在项目用到了ThreadLocal,存放一些值.起线程异步获取ThreadLocal中的值,得到null.这是由于,ThreadLocal.get()会获取当前线程的一个map对象,以Th ...