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. 如何看懂ORACLE执行计划

    如何看懂Oracle执行计划 一.什么是执行计划 An explain plan is a representation of the access path that is taken when a ...

  2. 微信公众号开发 但是服务端仅仅接收到了 p1 p2 没有接收到p3

    w 栗子 js window.location = www.xx.com?p1=123&p2=456&p3=789 但是服务端仅仅接收到了 p1 p2 没有接收到p3 原因有哪些呢? ...

  3. Piggy-Bank---hdu1114（完全背包）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1114 题意是有一个存钱罐,当它是空的时候重量为E,满的时候重量为F:已知存钱罐里面有 n 种钱,每种钱 ...

  4. JavaScript教程1

    1.什么是 JavaScript? JavaScript 是一门跨平台.面向对象的动态的弱类型的轻量级解释型语言,是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言.应用于 HTML 文档能够在 ...

  5. 【我的Android进阶之旅】解决bug:You need to use a Theme.AppCompat theme (or descendant) with this activity.

    前言 今天用Android Studio 生成Activity的时候,默认继承AppCompatActivity ,而在AndroidManifest.xml我对该Activity设置了一个主题,然后 ...

  6. Android---55---Web Service概述

    Web Service 是什么? /*w3school*/ Web Services 是应用程序组件 Web Services 使用开放协议进行通信 Web Services 是独立的(self-co ...

  7. MYSQL SET ENUM字段类型

    show create table stu;//显示建表语句 create table t1(t enum('a','b','c')); insert into t1 values('a'); cre ...

  8. 0503-Hystrix保护应用-feign的hystrix支持

    一.概述 1.1.基础[示例一] 如果Hystrix在类路径上并且feign.hystrix.enabled = true,Feign将用断路器包装所有方法.还可以返回com.netflix.hyst ...

  9. Ubuntu 16.04 安装 JDK 及 Eclipse 详细步骤(转发：https://blog.csdn.net/bluish_white/article/details/56509446)

    2017.3.1更新 修正了一些命令,现在按照文章步骤配置不会出现问题了. JDK 安装及配置 参考来源:http://www.linuxidc.com/Linux/2017-02/140908.ht ...

  10. 使用Berkeley Parser进行句法分析

    一.句法分析 1.定义 句法分析判断输入的单词序列(一般为句子)的构成是否合乎给定的语法,并通过构造句法树来确定句子的结构以及各层次句法成分之间的关系,即确定一个句子中的哪些词构成一个短语,哪些词是动 ...