Chinaunix首页 | 论坛 | 博客
  • 博客访问: 1491222
  • 博文数量: 465
  • 博客积分: 8915
  • 博客等级: 中将
  • 技术积分: 6365
  • 用 户 组: 普通用户
  • 注册时间: 2010-07-30 15:05
文章分类

全部博文(465)

文章存档

2017年(33)

2016年(2)

2015年(4)

2014年(29)

2013年(71)

2012年(148)

2011年(178)

分类: IT业界

2012-05-28 16:37:42

Media Queries移动设备样式

本节我们将为你带来一种全新的样式技术。通过Media Queries样式模块,可以实现根据移动设备的屏幕大小,定制网站页面的不同布局效果。它的优点是开发者只需要实现一套页面,就能够在所有平台的浏览器下访问网站的不同效果。

在开始介绍Media Queries知识之前,先来看看一个传统的网站在各种移动设备上的页面显示效果。

首先,图6-1所示的是Google首页传统网站在iPhone Safari浏览器下的效果图。

 

 

从图6-1中可以看到,网页上有很多部分的内容都因为浏览器的实际大小而缩小了字号。为什么会出现这样的效果呢?

实际上,在iPhone中使用Safari浏览器浏览传统Web网站的时候,Safari浏览器为了能够将整个页面的内容在页面中显示出来,会在屏幕上创建一个980px宽度的虚拟布局窗口,并按照980px宽度的窗口大小显示网页。这样,我们所看到的效果就像图6-1,同时网页可以允许以缩放的形式放大或缩小网页。

在过去,为了能够适应不同显示器分辨率大小,通常在设计网站或开发一套网站的时候,都会以最低分辨率800´600的标准作为页面大小的基础,而且还不会考虑适应移动设备的屏幕大小的页面。

但是,iPhone的分辨率是320´480,对于以最低分辨率大小显示的网站,在iPhoneSafari浏览器下访问的效果依然还是那么糟糕。那么,究竟这些传统的Web网站有没办法在iPhone等小屏幕的移动设备下显示正常呢?答案是可以的。

现在来看看Google是如何把传统网站首页变成移动版本的网站首页的,如图6-2所示。

 

 

 

 

Google首页转成移动版后,整个页面上的内容已经清晰可见,页面的样式风格和传统网站有一些差异。Google究竟是如何将传统的网站转变为移动版本的网站的呢?同时,其他复杂的网站风格又需要做些什么才能变成移动版本呢?

若要实现上述的功能,我们需要在HTML页面用到viewportMedia Queries样式模块。

接下来我们将会介绍如何使用这两个技术知识点。

1.什么是viewport

Apple为了解决移动版Safari的屏幕分辨率大小问题,专门定义了viewport虚拟窗口。它的主要作用是允许开发者创建一个虚拟的窗口(viewport),并自定义其窗口的大小或缩放功能。

如果开发者没有定义这个虚拟窗口,移动版Safari的虚拟窗口默认大小为980像素。现在,除了Safari浏览器外,其他浏览器也支持viewport虚拟窗口。但是,不同的浏览器对viewport窗口的默认大小支持都不一致。默认值分别如下:

Android Browser浏览器的默认值是800像素;

IE浏览器的默认值是974像素;

Opera浏览器的默认值是850像素。

2.如何使用viewport

viewport虚拟窗口是在meta元素中定义的,其主要作用是设置Web页面适应移动设备的屏幕大小。

如以下代码:

                                    initial-scale=1,user-scalable=0" />

该代码的主要作用是自定义虚拟窗口,并指定虚拟窗口width宽度为device-width,初始缩放比例大小为1倍,同时不允许用户使用手动缩放功能。

在上面的代码中,我们使用了一个特别的名字:device-width。自iPhone面世以来,其屏幕的分辨率一致维持在320´480。由于Apple在加入viewport时,基本上使用width= device-width的表达方式来表示iPhone屏幕的实际分辨率大小的宽度,比如width=320。因此,其他浏览器厂商在实现其viewport的时候,也兼容了device-width这样的特性。

代码中的content属性内共定义三种参数。实际上content属性允许设置6种不同的参数,分别如下:

width指定虚拟窗口的屏幕宽度大小。

height定虚拟窗口的屏幕高度大小。

initial-scale指定初始缩放比例

maximum-scale指定允许用户缩放的最大比例。

minimum-scale指定允许用户缩放的最小比例。

user-scalable指定是否允许手动缩放。

 

 

 

本文节选自《HTML5移动Web开发指南》一书 唐俊开著

本书详细信息:http://blog.chinaunix.net/space.php?uid=13164110&do=blog&id=3225354

阅读(618) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~