什么是Viewport?

viewport是用户网页的可视区域, 翻译为中文可以叫做"视区"。

设置Viewport

一个常用的针对移动网页优化过的页面的Viewport meta设置如下:

<meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0,maximum-scale=1.0,user-scalable=no;" />

width:控制Viewport大小,可以指定的一个值,例如:600或一个特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。

height:与width相对应,指定高度。

initial-scale:初始缩放比例,也就是页面第一次load时缩放比例。

maximum-scale:允许用户缩放到最大的比例。

minimum-scale:允许用户缩放到最小的比例。

user-scalable:用户是否可以手动缩放。

响应式Web设计- Viewport的更多相关文章

  1. 响应式 Web 设计 - Viewport 和手机变框变粗的问题

    一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下: <meta name="viewport" content="width=devi ...

  2. 最佳的 14 个免费的响应式 Web 设计测试工具

    一旦你决定要搭建一个网站就应该已经制定了设计标准.你认为下一步该做什么呢?测试!我使用“测试”这个词来检测你网站对不同屏幕和浏览器尺寸的响应情况.测试在响应式网页设计的过程中是很重要的一步.如果你明白 ...

  3. 如何通过CSS3 实现响应式Web设计

    如何通过CSS3 实现响应式Web设计: 分为三个步骤:(1)允许网页宽度自动调整.首先在页面头部中,我们需要加入这样一行:<meta name="viewport" con ...

  4. css014 响应式web设计

    css014 响应式web设计 一.    响应式web设计基础知识 1.rwd的三大理念:a.用于布局的弹性网络, b.用于图片和视频的弹性媒体,c.为不同屏幕宽度创建的不同样式的css媒体查询. ...

  5. CSS3-基于浮动的布局,响应式WEB设计,定位网页上的元素,设计打印页面的css技术

    基于浮动的布局: 1.除非图片设置了宽度,否则始终应该要对浮动的图片设置一个宽度,这样可以让浏览器给其他内容腾出环绕的空间 2.当侧边栏的高度与主内容区的高度不一致的时候,可以用个margin进行调整 ...

  6. 什么是响应式Web设计?怎样进行?

    http://beforweb.com/node/6/page/0/3 开始第一篇.老规矩,先无聊的谈论天气一类的话题.十一长假,天气也终于开始有些秋天的味道,坐在屋里甚至觉得需要热咖啡.话说两年前也 ...

  7. 响应式WEB设计

    近期在学习有关响应式设计的内容,对此做了些整理,图片来源于网络,附上自己做的简单demo,没有js,只用CSS做了简单的搭建http://y.zhso.net/. 1.为什么需要响应式web设计 出于 ...

  8. 初探响应式Web设计

    公司书柜有本<响应式Web设计:HTML5和CSS3实战>,大概就认真看了前面几章,后面大部分介绍css3(随便找本手册都可以了要你可用!) <响应式Web设计:HTML5和CSS3 ...

  9. 《响应式Web设计实践》学习笔记

    原书: 响应式Web设计实践 目录: 第2章 流动布局 1. 布局选项 2. 字体大小 3. 网格布局 4. 混合固定宽度和流动宽度 第3章 媒介查询 1. 视口 2. 媒介查询结构 3. 内嵌样式与 ...

随机推荐

  1. 请写出JAVA弹栈压栈的步骤, 栈的存储方式

    一.栈的作用 1. 栈的存放 局部变量 堆中对象的引用(对象在堆内存中的地址)   一个对象的大小无法估计,但是一个对象的引用只占4byte   基本数据类型的变量没有什么存储区域的说法,内存中分为两 ...

  2. 如何在普通 UIViewController 中使用 UITableView

    本系列文章 <Swift on iOS 学习笔记> 将以不定长度.不定内容.不定形式的方式对外发布,主要记录一些 “可重用” 的知识,感谢你的阅读. 在继承自 UIViewControll ...

  3. 世风日下的哗啦啦族I (简单分块模板)

    题目链接 #include <bits/stdc++.h> using namespace std; typedef long long ll; #define inf 0x7ffffff ...

  4. JIRA中的标记语言的语法参考

    前言 看到网上有的文章说JIRA是使用Textile这门标记语言,有些语法和Wikitext和Markdown相像.JIRA在2017年进行了一次大更新,某些语法可能和以前不大一样,这里纪录一下常用的 ...

  5. zookeeper master 选举

    原文地址: http://www.cnblogs.com/nevermorewang/p/5611807.html 选主原理介绍:zookeeper的节点有两种类型,持久节点跟临时节点.临时节点有个特 ...

  6. Zynq7000开发系列-5(OpenCV开发环境搭建:Ubuntu、Zynq)

    操作系统:Ubuntu14.04.5 LTS 64bit OpenCV:OpenCV 3.1.0.opencv_contrib gcc:gcc version 4.8.4 (Ubuntu 4.8.4- ...

  7. 1-27TreeSet简介

    使用TreeSet存储Integer对象 TreeSet的特点是可以对存放进去的元素进行排序. package com.monkey1024.set; import java.util.TreeSet ...

  8. JavaScript特点、优缺点及常用框架

    参考来源:   http://www.cnblogs.com/SanMaoSpace/archive/2013/06/14/3136774.html

  9. 一个发散动画的菜单控件(主要记录控件x,y坐标的运动状况)

    private void showCloseAnim() { int size = viewList.size(); if (size % 2 == 0) { //是偶数 for (int i = 0 ...

  10. max713镍氢电池充电管理IC

    PDF:https://datasheets.maximintegrated.com/en/ds/MAX713SWEVKIT.pdf http://www.ixueshu.com/document/b ...