移动开发时,一般都会在头部加载这样一行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. CSS基础知识总结之css样式引用的三种方式

    在html中增加css样式有三种: 1.在标签中增加style属性: <!DOCTYPE html> <html lang="en" xmlns="ht ...

  2. 【説明する】DS

    其实就是数据结构课后题整理....只会一个是什么鬼 染色问题: 线段树? 功能太强大了! 我们并不需要那么多的功能 运用并查集!!! 将相同的并为一段 BZOJ 2375(讲真我没找到这个题在哪里.. ...

  3. 【Java】Java URLDecoder异常Illegal hex characters in escape (%)

    如果收到的HTTP请求参数(URL中的GET请求)中有一个字符串,是中文,比如“10%是黄段子”,服务器段使用URLDecoder.decode就会出现此异常.URL只能使用英文字母.阿拉伯数字和某些 ...

  4. 【HDOJ6638】Snowy Smile(线段树)

    题意:一个二维平面上有n个点,每个点的坐标是(x[i],y[i]),权值是w[i] 求一个矩形使得其中所有点的权值和最大,输出权值和 n<=2e3,x[i],y[i],w[i]的绝对值<= ...

  5. 20180715-Java String类

    public class StringDemo{ public static void main(String args[]){ char[] helloArray = {'h','e','l','l ...

  6. create-react-app下的@修饰器正确的使用方式记录

    在create-react-app下使用es7的@修饰器会报错''Support for the experimental syntax 'decorators-legacy' isn't curre ...

  7. Fault Contract

    The Fault Contract sample demonstrates how to communicate error information from a service to a clie ...

  8. 术语-BLOB:BLOB

    ylbtech-术语-Blob:Blob 计算机视觉中的Blob是指图像中的一块连通区域,Blob分析就是对前景/背景分离后的二值图像,进行连通域提取和标记.标记完成的每一个Blob都代表一个前景目标 ...

  9. 关于 推广QQ

    有一个项目 需要在用户提交表单之后,关闭页面,微信公众号发送一个模板消息,链接地址为qq推广的链接. 早上在试 先是在电脑端测试都是正常的. 然后开始上传到服务器端测试,发送模板消息之前的动作,都没有 ...

  10. springMvc中自定义bean转换接收前台传的参数

    转载:https://blog.csdn.net/u013476435/article/details/81538099 因前端整体传参时,参数名都不是驼峰写法,类似 music_name,music ...