zoukankan      html  css  js  c++  java
  • 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(视区概念)——pc端的理解

    Viewport(视区概念)——移动端的应用

  • 相关阅读:
    新浪微盘又是一个给力的产品啊,
    InfoQ: 百度数据库架构演变与设计
    列式数据库——Sybase IQ
    MapR初体验 淘宝共享数据平台 tbdata.org
    IBM正式发布新一代zEnterprise大型机(组图) 大型机,IBM,BladeCenter,美国,纽约 TechWeb News
    1TB is equal to the number of how many GB? 1PB equal to is equal to the number of TB? 1EB PB? | PCfault.com
    Cassandra vs HBase | WhyNosql
    The Hadoop Community Effect
    雅虎剥离开源软件平台 Hadoop ,与风投新建 Hortonworks 公司 品味雅虎
    RowOriented Database 、ColumnOriented Database 、KeyValue Store Database 、DocumentOriented Database
  • 原文地址:https://www.cnblogs.com/xiezhengcai/p/3144560.html
Copyright © 2011-2022 走看看