Viewport的用处:手机拥有了浏览器的初期,人们并没有专门为移动设备设计页面,造成的直接结果就是,访问的页面是直接将电脑页面进行缩放,操作起来有诸多不便,viewport就是用来解决这个问题的

1、viewport的概念:移动设备上,用来显示网页的区域.

  • 如果把移动设备的浏览器(也有可能是app中的webview) ,当做相框的话
  • viewport就相当于相框中的画,可能会比相框小,可能会比相框大,如果刚好一样大,那就皆大欢喜.

2、修改viewport我们可以通过meta标签去修改viewport的,防止滚动条出现,提升用户体验

  • 移动web常见设置<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  • 该属性最早是苹果公司在Safari中推出用来解决移动设备的viewport问题的.后来被各大安卓以及浏览器厂商效仿,所以说这个属性真的是非常有用的

3、可选值

  • width:设置layout viewport 的宽度,为一个正整数,或字符串" device- width"
  • initial-scale:设置页面的初始缩放值,为一个数字,可以带小数
  • minimum-scale:允许用户的最小缩放值,为一个数字,可以带小数
  • maximum-scale:允许用户的最大缩放值,为一个数字,可以带小数
  • height:设置layout viewport 的高度,这个属性对我们并不重要,很少使用
  • user-scalable:是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许

viewport简介的更多相关文章

  1. 移动前端第一弹:viewport详解

    前言 这次想聊聊移动开发相关的事.是的,你没有看错,一句话就可以开始你的移动前端开发. 你心里一定在想,什么话这么酷,能够瞬间带入到移动前端开发的世界. 但其实它一点也不新奇,不复杂. viewpor ...

  2. jquery简介和实例

    一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库. 参考:http://www.php100 ...

  3. jQuery Mobile_公司简介

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...

  4. 移动终端学习1:css3 Media Queries简介

    移动终端学习之1:css3 Media Queries简介 1.简介 这篇文章写的不错,我就不重复了,来个链接:http://www.w3cplus.com/content/css3-media-qu ...

  5. 移动终端学习一:css3 Media Queries简介

    移动终端学习之一 css3 Media Queries简介 1.简介 别人写过的我就不重复了,来个链接:http://www.w3cplus.com/content/css3-media-querie ...

  6. 转: 关于viewport的理解

    最近我做了一点儿针对手机的Web开发和相关研究.按说,Web自设计之初,就已经考虑了设备无关性.然而,现实总是不尽如人意. 我们知道大多数网页都是针对桌面显示器开发和测试的,但是手机屏幕通常要比桌面显 ...

  7. Bootstrap3 栅格系统-简介

    Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义类,还有强大的mixin 用于生成更具 ...

  8. rem 原理与简介

    一.rem 原理与简介 字体单位:     值根据 html 根元素大小而定,同样可以作为宽度,高度等单位 适配原理:     将 px 替换为 rem,动态修改 HTML 根元素的 font-siz ...

  9. Bootstrap学习(一):Bootstrap简介

    一.Bootstrap简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更 ...

随机推荐

  1. 无NavigationBar到有NavigationBar视图切换时的一个坑

    NavigationController在iOS App中是最常见不过了,可以说是每个App中必备的了.自iOS7开始,系统自带的右滑返回效果,也可以让有NavigationBar的视图切换很丝滑流畅 ...

  2. 第00章—IDEA

    spring boot 系列学习记录:http://www.cnblogs.com/jinxiaohang/p/8111057.html 码云源码地址:https://gitee.com/jinxia ...

  3. 使用jQuery操作Cookies

    转载自: https://www.cnblogs.com/yonge/articles/2698106.html Cookies是一种能够让网站服务器把少量数据储存到客户端的硬盘或内存,或是从客户端的 ...

  4. Frequent Values-线段树求解出现最多的数

    Frequent Values(poj 3368) 注意:以下答案为离线作答结果,并非能通过poj,若要通过poj,需要修改函数接口,因为以下程序接受半封闭区间(s,e],同时还需要修改输入数据的顺序 ...

  5. (4.3)ODBC/OLE DB/ADO概念与使用情况

    一.ODBC   ODBC的由来 1992年Microsoft和Sybase.Digital共同制定了ODBC标准接口,以单一的ODBC API来存取各种不同的数据库.随后ODBC便获得了许多数据库厂 ...

  6. SVG Use(转)

    转自:http://www.zhangxinxu.com/wordpress/2014/07/introduce-svg-sprite-technology/ 未来必热:SVG Sprite技术介绍 ...

  7. linux命令行与shell脚本编程 -----15控制脚本

    常见的Linux系统信号 信号 值 描述 1 SIGHUP 挂起进程 2 SIGINT 终止进程 3 SIGQUIT 停止进程 9 SIGKILL 无条件终止进程 15 SIGTERM 可能的话终止进 ...

  8. Tomcat 安装、配置与部署

    Tomcat的官方网站:http://tomcat.apache.org/,目前最新版本为7.0. Tomcat下载地址: 1.32位:http://mirrors.tuna.tsinghua.edu ...

  9. go——接口

    Go语言提供了另外一种数据类型,即接口,它把所有具有共性的方法定义在一起,任何其它类型只要实现了这些方法就是实现了这个接口. 接口代表一种调用契约,是多个方法声明的集合.在某些动态语言里,接口(int ...

  10. 我们为什么使用ORM

    我们为什么使用ORM? http://www.cnblogs.com/tansm/archive/2006/06/07/419927.html 博客园在推广ORM方面的确做了很大的贡献,很多的程序员开 ...