移动端适配之视觉窗口view-port的详细设置
流式布局
就是百分比布局,非固定像素,内容向两侧填充,理解成流动的布局。
视觉窗口
viewport,是移动端特有。这是一个用于承载网页的虚拟的区域,。
承载关系:浏览器---->viewport---->网页
适配要求:
1. 网页宽度必须和浏览器保持一致
2. 默认显示的缩放比例和PC端保持(缩放比例1.0)
3. 不允许用户自行缩放网页
满足这些要求达到了适配,国际上通用的适配方案,标准的移动端适配方案。
适配设置:
如果任何设置都没有,默认走的就是viewport的默认设置
去设置新的viewport设置,达到适配要求。
设置视口的标签 在head里面并且应该紧接着编码设置
viewport的功能:
- width 可以设置宽度 (device-width 当前设备的宽度)
2. height 可以设置高度
3. initial-scale 可以设置默认的缩放比例
4. user-scalable 可以设置是否允许用户自行缩放
5. maximum-scale 可以设置最大缩放比例
6. minimum-scale 可以设置最小缩放比例
在 content="" 使用以上参数
1. width=device-width 宽度一致比例是1.0
2. initial-scale=1.0 宽度一致比例是1.0
3. user-scalable=no 不允许用户自行缩放 (yes,no 1,0)
标准适配方案:
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
meta:vp + tab 快捷方式
移动端适配之视觉窗口view-port的详细设置相关推荐
- 移动端适配推荐flexible和 postcss-px2rem
vue项目移动端.PC端适配方案 vue项目移动端.pc端适配方案 lib-flexible 根据屏幕宽度,自动设置html的font-size postcss-px2rem 自动将px单位转换成re ...
- nuxt 移动端适配
nuxt 移动端适配 (flexible + postcss-px2rem) nuxt.config.js head:{meta:[{ name: 'viewport', content: 'widt ...
- 移动端布局三种视口_前端基础:必须要知道的移动端适配(4)——视口
视口(viewport)代表当前可见的计算机图形区域.在Web浏览器术语中,通常与浏览器窗口相同,但不包括浏览器的UI, 菜单栏等--即指你正在浏览的文档的那一部分. 一般我们所说的视口共包括三种:布 ...
- 移动端适配(必须要知道的,亲测有效)
关于移动端适配(必须要知道的,亲测有效) 一.各种单位概念理解 二.移动,web开发 三.移动端适配 1.视口(viewport)概念 2.视口(viewport)适配(代码) 3.rem单位适配 f ...
- 移动端适配方案(上)
转载自:https://github.com/riskers/blog/issues/17 要搞懂移动端的适配问题,就要先搞明白像素和视口. 像素 在移动端给一个元素设置 width:200px 时发 ...
- 一文搞定移动端适配!
作者 | 好学习吧丶 责编 | 郭芮 手机市场日渐丰富的同时,给我们前端开发人员带来的 "网页内容自适应屏幕尺寸进行显示的问题" 也日渐凸显出来,接下来我们就要细说移动端适配的前世 ...
- 关于移动端适配,你必须要知道的
关于移动端适配,你必须要知道的 关于移动端适配,你必须要知道的 分享一款前端实用的面试题小程序 建议收藏,微信搜索 MST题宝库 移动端适配,是我们在开发中经常会遇到的,这里面可能会遇 ...
- 前端CSS移动端适配
导读 移动端适配,是我们在开发中经常会遇到的,这里面可能会遇到非常多的问题: 1px问题 UI图完美适配方案 iPhoneX适配方案 横屏适配 高清屏图片模糊问题 ... 上面这些问题可能我们在开发中 ...
- pc端 移动端适配rem插件方式
vue-屏幕适配方案 一,PC端适配 开发PC端项目,通常会要求适应各种的屏幕尺寸,并且要求浏览器缩小页面等比例变化,因此就要求写出来的前端页面是能够自适应的. 利用webpack配置px2rem-l ...
最新文章
- 自动化测试8大元素定位之xpath语法
- frontpage编辑html,怎样用FrontPage软件编辑HTML帖子 | 音画代码学堂 - 中国音画家园 - Po...****...
- LeetCode 101. 对称二叉树 思考分析
- Purus系统常见使用问题及解决方式FAQ 1
- 剑指offer——29.顺时针打印矩阵(不熟)
- Spring学习笔记(四)
- tomcat编码配置gbk_Tomcat中的编码问题
- copy的过去式_[copy是什么意思中文翻译成]copy是什么意思中文翻译
- 如何由网址查找IP地址
- 扩展期权定价模型到二元期权定价
- 微信朋友圈卖货五大法则
- 不等距双杆模型_对磁场中双杆模型问题的解析(精)
- VS2008+DDK+ddkwizard环境的配置
- 二、Git本地仓库基本操作——创建Git仓库、提交更新或删除文件
- truct in6_addr has no member named in6_u
- 朋友圈里这3种人,一定要远离
- 学术论文rebuttal
- 以太网交换机性能测试丢包的原因
- 中国软件领域院士及其成就
- 工业智能网关BL110应用之四十二:COM口采集三菱PLC FX3U的配置