Media Queries移动设备样式

Media Queries移动设备样式

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

传统网站在iPhone上的显示问题

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

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

 

 

从图6-1中能够看到，网页上有不少部分的内容都由于浏览器的实际大小而缩小了字号。为何会出现这样的效果呢？

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

在过去，为了可以适应不一样显示器分辨率大小，一般在设计网站或开发一套网站的时候，都会以最低分辨率800´600的标准做为页面大小的基础，并且还不会考虑适应移动设备的屏幕大小的页面。

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

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

 

 

 

 

Google首页转成移动版后，整个页面上的内容已经清晰可见，页面的样式风格和传统网站有一些差别。Google到底是如何将传统的网站转变为移动版本的网站的呢？同时，其余复杂的网站风格又须要作些什么才能变成移动版本呢？

若要实现上述的功能，咱们须要在HTML页面用到viewport及Media Queries样式模块。

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

viewport设置适应移动设备屏幕大小

1．什么是viewport

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

若是开发者没有定义这个虚拟窗口，移动版Safari的虚拟窗口默认大小为980像素。如今，除了Safari浏览器外，其余浏览器也支持viewport虚拟窗口。可是，不一样的浏览器对viewport窗口的默认大小支持都不一致。默认值分别以下：

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

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

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

2．如何使用viewport

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

如如下代码：

<meta name="viewport" content="width=device-width,

                                    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://bvbroadview.blog.51cto.com/addblog.php