HTML5+CSS3手机Web开发学习指南.pptx

HTML5+CSS3

手机Web开发;学习目标;HTML5与CSS3应用是多样化的，除了针对普通的电脑显示器，还有手机、平板电脑等。

在不同的设备中，浏览器的窗口尺寸可能是不相同的，如果只针对某种窗口尺寸来制作网页，在其他设备中呈现的网页就会出现很多问题。如果针对不同的窗口尺寸制作不同的网页，那么要制作的网页就会太多了。;;;移动版的Safari浏览器最新引入了viewport这个meta标签，让网页开发者来控制viewport的大小和缩放，其他手机浏览器也基本支持。

不同的浏览器对viewport窗口的默认大小支持都不一致。默认值分别如下：

AndroidBrowser浏览器的默认值是800像素；

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

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

;viewport虚拟窗口是在meta元素中定义的，其主要作用是设置Web页面适应移动设备的屏幕大小，例如新浪网页为了适应手机屏幕，也使用了viewport，代码如下所示：

metaname=viewport content=width=device-width,

minimum-scale=1.0,maximum-scale=2.0/

本段代码用来自定义虚拟窗口，content参数内容指定虚拟窗口width宽度为device-width，“device-width”将自动检测移动设备