viewport ——视区概念,为 自适应网页设计
什么是Viewport
手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放,其他手机浏览器也基本支持。
Viewport 基础
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下:
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
height:和 width 相对应,指定高度。
initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
maximum-scale:允许用户缩放到的最大比例。
minimum-scale:允许用户缩放到的最小比例。
user-scalable:用户是否可以手动缩放
Viewport 参考资料
Mozilla 开发者博客上有 viewport 使用教程。
Apple 开发者站上面有viewport 详细的描述。
quirksmode.org 有详细的 viewport 在各个手机浏览器不同之处介绍。
android web开发入门
通俗的讲,就是为移动设备开发网页。伴随着3G时代的到来、浏览器技术的不断进步,越来越多的人开始离开PC,使用手中的移动设备(手机、PSP、平板)上网。如果您是一个注意生活细节的人,那么在您乘坐地铁、公交的时候,请认真看看你周围的人都在干什么?是不是每人抱着一个手机在听音乐、看新闻、聊天呢?
作为一个开发人员,如何开发出更适合于移动设备的网页呢?如何让您的站点能被大多数移动设备更轻松地访问?本系列文章将会一一的为您解答。
当今最受欢迎的手机系统包括 Android,iPhone ,Symbian,BlackBerry 与Web OS。这些系统浏览器都是基于webkit核心,而webkit号称是一款全功能的移动浏览器,支持 HTML + CSS + JavaScript,但由于移动设备本身与PC的差异,导致我们开发的网页在移动设备上总是会存在一些不如人意的地方。
首先我们要接触的第一个概念就是“viewport”,翻译为中文可以叫做“视区”,大家都知道移动设备的屏幕一段都比PC小很多,webkit浏览器会将一个较大的“虚拟”窗口映射到移动设备的屏幕上,默认的虚拟窗口为980像素宽(目前大部分网站的标准宽度),然后按一定的比例(3:1或2:1)进行缩放。也就是说当我们加载一个普通网页的时候,webkit会先以980像素的浏览器标准加载网页,然后再缩小为490像素的宽度。注意这个缩小是一个全局缩小,也就是页面上的所有元素都会缩小。如下图所示,一个普通的文章页面在移动设备的效果:
页面以980像素加载,没有变形,但是按比例缩放后,已经没有多少东西是可以用肉眼看清的了,好在一般的移动设备都支持屏幕放大。放大之后,我们才能看清屏幕上的内容。
怎么样,对viewport的概念有一定的了解了吧?那么我们能不能人为改变webkit的视区呢?当然能,在<head>与</head>之间加上如下视区代码:
<meta name="viewport" content="width=500" />
我们来看看页面加上强制视区大小命令后效果怎么样? 如下图所示:
怎么样?是不是好了很多?那么有没有更好的方法呢?比如说我们自动检测移动设备屏幕大小,然后让内容自适应。很简单,看来面的代码:
<meta name="viewport" content="width=device-width" />
device-width将自动检测移动设备的屏幕宽度。
转:http://hi.baidu.com/tang_guangyao/item/3dda73c83936afe5984aa095
参考:http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html
Viewport的一些研究:
viewport ——视区概念,为 自适应网页设计的更多相关文章
- 手机web——自适应网页设计(html/css控制)
一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的? 其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name=" ...
- 【转】手机web——自适应网页设计(html/css控制)
手机web——自适应网页设计(html/css控制) 就目前形势来看,Web App 正是眼下的一个趋势和潮流,但是,对于Web App的设计可能大家有的不是很了解,下面就将整理好的网页设计的技巧奉献 ...
- 手机web——自适应网页设计(html/css控制) - 51CTO.COM
body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...
- 手机web——自适应网页设计(html/css控制)【转】
一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的?其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name="v ...
- 手机web——自适应网页设计(html/css控制)http://mobile.51cto.com/ahot-409516.htm
http://mobile.51cto.com/ahot-409516.htm 一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的? 其实并不难. 首先,在网页代码的 ...
- 手机web——自适应网页设计(html/css控制)(转)
一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的?其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name="v ...
- 自适应网页设计(Responsive Web Design)
引用:http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面 ...
- 自适应网页设计(Responsive Web Design)(转)
随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...
- (转)自适应网页设计(或称为响应式web设计)(Responsive Web Design)
随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...
- 自适应网页设计(Responsive Web Design)(转)
作者: 阮一峰 出处:http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 随着3G的普及,越来越多的人使用手机上网. 移 ...
随机推荐
- IOS-各控件默认尺寸和参考图标大小
UITabBar
- KnockoutJS 3.X API 第五章 高级应用(3) 虚拟元素绑定
注意:这是一种高级技术,通常仅在创建可重用绑定的库时使用. 这不是你通常需要做的时候使用Knockout构建应用程序. Knockout的控制流绑定(例如,if和foreach)不仅可以应用于常规DO ...
- 12.创建一个Point类,有成员变量x,y,方法getX(),setX(),还有一个构造方 法初始化x和y。创建类主类A来测试它。
package java1; public class Point { int x; int y; Point(int x,int y) { this.x = x; this.y = y; } pub ...
- 图(C描述)
一.概念 图是由顶点的非空有限集合V(由N>0个顶点组成)与边的集合E(顶点之间的关系)构成.边没有方向的图成为无向图,反之为有向图 无向图:
- 3D Grid Effect – 使用 CSS3 制作网格动画效果
今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...
- web中的触摸(touch)与手势(gesture)事件
一.触摸事件(TouchEvent): 事件: touchstart:当手指触摸屏幕时触发:即使已经有一个手指放在了屏幕上也会触发 touchmove:当手指在屏幕上滑动时连续的触发.调用preven ...
- Spring Boot异常处理详解
在Spring MVC异常处理详解中,介绍了Spring MVC的异常处理体系,本文将讲解在此基础上Spring Boot为我们做了哪些工作.下图列出了Spring Boot中跟MVC异常处理相关的类 ...
- PHP的反射机制
在面向对象中最经典的使用就是反射,之前在Java语言中,使用反射可以解耦,用于依赖注入. 在PHP中,同样也有如此强大的地方,我们利用反射来获取一个对象的实例. 首先我们先写一个类: class Te ...
- .Net Task<T>的一种比较神奇的卡死情况(Wait/Result卡死, await能得到结果)
出现的环境.Net4.0 + WebApi1(4.0.30506.0) + Microsoft.Bcl.Async.1.0.168 自己死活看不出原因, 分享出来给大家看看,希望有人能找到问题的关键 ...
- 【转】nginx+iis实现负载均衡
最近在研究分布式系统架构方面的知识,包括负载均衡,数据库读写分离,分布式缓存redis等.本篇先从负载均衡服务架构入手,关于负载均衡百度百科的定义如下:负载均衡,英文名称为Load Balance,其 ...