什么是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. OPENGL1_环境

    补充说明: 1 vs2010自带opengl的库,不需要单独下载或做任何配置,(但是lib文件,dll文件放的位置过于分散,用的时候感觉不好用) 使用时直接用 #include <gl/GL.h ...

  2. 洛谷P2473 [SCOI2008]奖励关(期望+状压)

    传送门 我数学期望还是太差了…… 先考虑状压模型,设$dp[i][S]$表示第$i$轮,当前宝物状态为$S$,能获得的最大期望分数 然而这个模型有一个问题,第$i$轮不一定能达到状态$S$ 那么考虑转 ...

  3. Mol Cell Proteomics. |阳梦如|富马酸二甲酯在神经元和星形胶质细胞中新蛋白质靶点的鉴定及相关功能验证

    大家好,本周分享的是发表在Molecular & Cellular Proteomics.上的一篇关于富马酸二甲酯在脑细胞蛋白质中新作用靶点的鉴定及功能性验证的文章,题目是Identifica ...

  4. flask_之参数传递

    参数篇 request接收数据 request对象 method:当前请求方法(POST,GET等) url:当前链接地址 path:当前链接的路径 environ:潜在的WSGI环境 headers ...

  5. [arc063]F.すぬけ君の塗り絵2

    因为这题考虑可以观察一个性质,答案的下界为 \(2×(max(w,h)+1)\), 因为你至少可以空出一行或一列,因此这个矩形一定会经过 \(x=\frac{w}{2}\) 或 \(y=\frac{h ...

  6. python之内置函数(lambda,sorted,filter,map),递归,二分法

    一.lambda匿名函数 为了解决一些简单需求而设计的一句话函数,lambda表示的是匿名函数,不需要用def来声明,一句话就可以声明出一个函数. 语法: 函数名 = lambda 参数 : 返回值 ...

  7. 轻松把玩HttpClient之配置ssl,采用绕过证书验证实现https

    上篇文章说道httpclient不能直接访问https的资源,这次就来模拟一下环境,然后配置https测试一下.在前面的文章中,分享了一篇自己生成并在tomcat中配置ssl的文章<Tomcat ...

  8. mysql添加用户并赋予权限命令

    添加用户: create user 'gouge'@'localhost' identified by 'gouge'; 赋予权限: 给gouge 用户赋予所有test开头的数据库权限 (test% ...

  9. 最大流bfs

    #include<iostream> #include<cstdio> #include<cstring> #include<algorithm> #i ...

  10. Mvc 多级控制器 路由重写 及 多级Views目录 的寻找视图的规则

    1.那么我们再来看我们需要的访问方式,如下图 如果我们要访问Admin下的TestController里面的Index页面,那么我们输入Test/Index,这个肯定不行的.因为TestControl ...