移动开发时,一般都会在头部加载这样一行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. java连接redis5.0单机版报连接超时错误

    使用java代码测试redis5.0单机版时,报redis连接超时异常,而linux上的redis能正常访问: redis.clients.jedis.exceptions.JedisConnecti ...

  2. jsp选择文件夹上传

    文件夹数据库处理逻辑 publicclass DbFolder { JSONObject root; public DbFolder() { this.root = new JSONObject(); ...

  3. windows下使用Ant编译Android项目

    1. 安装ant,配置环境变量 2. 执行命令: android update project -p 项目路径 例:android update project -p D:\project\UI_de ...

  4. UE4 中的Blutilities

    该功能是为编辑器中的简单扩展功能而设置的. 一般而言用蓝图在编辑器中做功能扩展都会用到Construction Script,但该功能有一些缺陷: 首先在actor发生任何变化(包括Transform ...

  5. Type Interceptors

    Type Interceptors Castle.Core, part of the Castle Project, provides a method interception framework ...

  6. 拒绝从入门到放弃_《鸟哥的 Linux 私房菜 — 基础学习篇(第三版)》必读目录

    目录 目录 前言 关于这本书 必看知识点 最后 前言 相信部分刚进入这个行业的新同学会对一个问题感到疑惑,为什么从培训学校出来的学员不被欢迎? 这里记录下一些我个人的看法(博主也曾有面试新员工的经历) ...

  7. Hadoop HDFS本地存储目录结构解析

    转自:https://blog.csdn.net/superman_xxx/article/details/51689398 HDFS metadata以树状结构存储整个HDFS上的文件和目录,以及相 ...

  8. JSP表单提交 与 接受显示

    Demo01.jsp 提交表单输入的信息至 Demo02.jsp方法一 1 <%@ page language="java" contentType="text/h ...

  9. 操作系统 - Linux命令整理 - Ubuntu

    镜像 http://mirrors.163.com/ubuntu-releases/ 系统相关 Ubuntu14.04相关 安装 - VMware Install Ubuntu Continue In ...

  10. app自动化appium使用内置adb命令

    一.Appium-server使用 1.登陆页面 高级设置:可以设置Android 和 IOS 日志级别:dabug非常详尽的日志 记录python代码向他发送的请求以及他在收到请求后做的一系列处理 ...