Web页面适应移动设备的问题

标签：

一、viewport设置Web页面适应移动设备的屏幕大小

用法：<meta name="viewport" content="width=device-width,initial-scale=1,
user-scalable=0" />
解释：自定义虚拟窗口，并指定虚拟窗口width宽度为：device-width，初始
缩放比例大小为1倍，同时不允许用户使用手动缩放功能。
补充：content属性允许设置6种不同的参数，分别是：width/height：虚拟窗口大小
initial-scale：指定初始缩放比例，user-scalabel：是否允许手动缩放，
maximum-scale/minimum-scale：允许用户缩放的最小比例。

二、Media Queries解决移动Web设备页面的布局

原理：针对不同的分辨率，引入不同的CSS样式文件
例如：1.当屏幕可视区域的宽度最大值为600像素时，应用该样式文件：
<link rel="stylesheet" media="screen and(max-width:600px)" href="small.css"/>
并在small.css样式文件内，定义media类型的样式如下：
@media screen and (max-width:600px){.demo{background:#CCC;}}

2.当屏幕可视区域的宽度长度在600px和900px之间时，应用该样式文件：
<link rel="stylesheet" media="screen and(min-width:600px) and(max-width:900px)"
href="small.css">
@media screen and (min-width:600px) and(max-width:900px)
{.demo{background-color:#ccc;}}

3.当◆手机◆(如iPhone)最大屏幕可视区域是480px：
<link rel="stylesheet" media="screen and(max-device-width:480px)"
href="small.css"/>
@media screen and (max-device-width:480px){.demo{background-color:#ccc;}}

4.当移动设备◆方向◆发生变化时应用该样式：
<link rel="stylesheet" media="all and(orientation:portrait)" href="protrait.css"/>
<link rel="stylesheet" media="all and(orientation:landscape)" href="landscape.css"/>
(注： 纵向 - portrait；横向 - landscape)

///////////////////////////////////////////////////////////////////////
Media Queries：
<link rel="stylesheet" type="text/css" media="only screen and (max-width:480px),
only screen and(max-device-width:480px)" href="device.css">

Web页面适应移动设备的问题

标签：

原文地址：http://www.cnblogs.com/hkhg/p/5165926.html