移动开发时,一般都会在头部加载这样一行meta标签

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

这一行什么意思呢?

viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,默认的viewport是layout viewport,也就是那个比屏幕要宽的viewport,但在进行移动设备网站的开发时,我们需要的是ideal viewport。width=device-width表示当前的viewpoint等于设备的宽度,width用来设置layout viewport的宽度,height用来设置layout viewport的高度。initial-scale=1.0表示页面的初始缩放值为1,maximum-scale允许用户的最大缩放值,minimum-scale允许用户的最小缩放值,user-scalable表示是否允许用户缩放,“no”不允许,“yes”允许。

关于缩放

缩放指的是相对于ideal viewport来进行的,比如<meta name="viewport" content="width=500, initial-scale=1">,width=500表示把当前的viewport宽度设为500,initial-scale=1则表示把当前viewport的宽度设为ideal viewport的宽度,浏览器该怎么办呢,一般会取较大的那个值。

前端移动开发--viewpoint的更多相关文章

  1. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

  2. [web建站] 极客WEB大前端专家级开发工程师培训视频教程

    极客WEB大前端专家级开发工程师培训视频教程  教程下载地址: http://www.fu83.cn/thread-355-1-1.html 课程目录:1.走进前端工程师的世界HTML51.HTML5 ...

  3. 基于webpack的前端工程化开发解决方案探索(一):动态生成HTML(转)

    1.什么是工程化开发 软件工程的工程化开发概念由来已久,但对于前端开发来说,我们没有像VS或者eclipse这样量身打造的IDE,因为在大多数人眼中,前端代码无需编译,因此只要一个浏览器来运行调试就行 ...

  4. MVVM开源框架Knot.js 教程2 - 大幅改变前端框架开发体验的Debugger

    Knotjs教程系列 1.CBS初步 2.Knot.js Debugger(本文) ....持续增加中 Knot.js 教程2 - 改变前端框架开发体验的Debugger Debugger只是一个方便 ...

  5. Viewport Resizer下载 谷歌前端自适应开发工具

    原文链接:http://www.phpbiji.cn/article/index/id/107/cid/6.html Viewport Resizer下载 谷歌前端自适应开发工具 在前端开发过程中,随 ...

  6. 前端模块化开发学习之gulp&browserify篇

     随着web应用的发展,前端的比重占得越来越多,编写代码从而也越来越复杂.而通常我们需要将不同功能或者不同模块的代码分开写,最后在html中一起加载,这样做是可以的,但是当你需要进行维护或者是二次开发 ...

  7. 前端教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-资源汇总

    内容精简 资源这么多,多看看多学习再总结肯定是好的.多读读就算看重了不算浪费时间,毕竟一千个读者就有一千个林黛玉,还有温故而知新,说不定多读一些内容,就发现惊喜了呢.不过,在此也精简一些内容,就1~2 ...

  8. 【招聘】.NET高级开发、前端高级开发、测试工程师

    .NET架构师 工作地点:厦门-湖里区 工作年限:5年及以上 学历要求:大专或以上 工资范围:15000元 - 25000元 福利待遇:五险一金,带薪年休假,年度旅游,丰富的员工团队活动:生日会.中秋 ...

  9. 移动前端webApp开发点滴积累20140629

    #移动前端webApp开发点滴积累20140629 ##关于input行内居中的问题 给input设定一个比较高的高度,在某些版本的移动设备上,文字不能垂直居中,即使设定了相同的行高也不行.(见图) ...

随机推荐

  1. linux运维、架构之路-linux磁盘管理

    一.企业中磁盘选购: 1.线上的业务,用SAS磁盘 2.线下的业务,用SATA磁盘,磁带库 3.线上高并发.小容量(多人浏览力图片)的业务,SSD磁盘 4.根据数据的访问热度,智能分析分层存储,SAT ...

  2. (转)深入理解Linux修改hostname

    当我觉得对Linux系统下修改hostname已经非常熟悉的时候,今天碰到了几个个问题,这几个问题给我好好上了一课,很多知识点,当你觉得你已经掌握的时候,其实你了解的还只是皮毛.技术活,切勿浅尝则止! ...

  3. EZOJ #387字符串

    分析 似乎ttl的模拟赛t3总是折半搜索? 先把所有串转化为每个字母的0/1状态 之后我们将所有字符串分为两半 分别枚举状态 我们发现只有左右两边的字母状态相等才能保证这个集合合法 所以我们在搜左半边 ...

  4. Linux学习篇(三)-Linux操作系统及常用命令

    小知识:南桥北桥 北桥是高速总线控制器,在CPU附近,连接内存和CPU,需要传输大量数据. 南桥是低速总线控制器,用于连接IO设备(硬盘键盘鼠标等),IO设备由南桥汇总会直接传入北桥.,目前cpu可以 ...

  5. git清空远程仓库

    需求背景:因为用jenkins连接了git仓库,有时候job构建出现问题,需要排查问题,但是呢,真实的项目代码量非常pang大,所以就需要建1个测试仓库,使用最少量的代码能复现自己的问题就好. 这就需 ...

  6. Vi 常用命令列表

    基本上vi可以分为三种状态,分别是命令模式(command mode).输入模式(Insert mode)和末行模式(last line mode),各模式的功能区分如下: 1) 命令模式(comma ...

  7. HTML-lang属性规定元素内容的语言

    所有浏览器均支持 lang 属性. 属性lang是英语language的缩写,意思是语言,”en”代表英语,”zh-CN”代表中文 注释:lang 属性在以下标签中无效:<base>, & ...

  8. 【题解】4879. 【NOIP2016提高A组集训第11场11.9】少女觉

    Description 在幽暗的地灵殿中,居住着一位少女,名为古明地觉.据说,从来没有人敢踏入过那座地灵殿,因为人们恐惧于觉一族拥有的能力——读心.掌控人心者,可控天下. 咳咳.人的记忆可以被描述为一 ...

  9. APT攻防整理-攻击方法/工具

    攻击步骤 一般步骤 社工 武器制造 武器投递 漏洞利用 安装后门 后渗透 这5个阶段攻击非常隐蔽,可绕过传统安全设备检测 潜伏控制 传统通信方式不会使用,如cc/socket/http(可采用安全隧道 ...

  10. Python的一些高级特性

    内容基本上来自于廖雪峰老师的blog相当于自己手打了一遍,加强加强理解吧. http://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493 ...