怎样低成本的实现网页在移动端的适配

问题：同一个网页，在web端显示良好，在移动端访问可读性非常差。

目的：One page for all devices。网页在不同的设备打开，在不同的分辨率下打开时可读可用。网页能够兼容多个终端——而不是为每个终端做一个特定的版本。

也就是我们常说的如何构建“响应式网页设计”(responsive web design)。

示例网站 250个响应式页面模板

解决方案涉及到的知识点：

viewport
媒体查询(media query)
Javascript window.matchMedia
响应式图片
栅格布局
顶部导航
测试工具

iOS和Android自带的浏览器都是基于webkit内核，所以我们可以使用viewport属性和media query技术实现网站的响应性。

viewport

在<head>之中添加viewport元数据标签。

width=device-width 实现屏幕适配，页面绘制根据触屏大小变化，保持一致。

initial-scale 表示初始缩放。

Js代码

<meta name="viewport" content="width=device-width, initial-scale=1.0">

maximum-scale 表示最大缩放比例，1意味着不能进行缩放。

user-scalable=no 禁用页面缩放（zooming）功能。禁用缩放后，用户只能滚动屏幕，让你的网站看上去更像原生应用。

注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！

Js代码

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

媒体查询(media query)

根据不同的分辨率，引用不用的css

Css代码

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

Bootstrap3的实现 http://v3.bootcss.com/css/#grid-media-queries ，

以下是LESS方法的实现

Js代码

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Javascript window.matchMedia

用CSS3解决的确很方便，但某些场景下仍然需要JS技术。

Js代码

if (window.matchMedia("(min-width: 400px)").matches) {
// The screen width is 400px or wider.
} else {
// The screen width is less than 400px.
}

状态改变时监听

Js代码

function setup_for_width(mql) {
if (mql.matches) {
// The screen width is 400px or wider. Set up or change things
// appropriately.
} else {
// The screen width is less than 400px. Set up or change things
// appropriately.
}
}
var width_mql = window.matchMedia("(min-width: 400px)");
// Add a listener for when the result changes
width_mql.addListener(setup_for_width);
// And share the same code to set things up with our current state.
setup_for_width(width_mql);

matchmedia库

大小：595B

检测浏览器是否支持media query和media type。

使用方法如下：

Js代码

<script src="<a href="http://scottjehl.github.io/picturefill/external/matchmedia.js">http://scottjehl.github.io/picturefill/external/matchmedia.js</a>"></script>

Js代码

//测试 'tv' 媒体类型
if (matchMedia('tv').matches) {
// tv media type supported
}
//测试移动设备的媒体查询
if (matchMedia('only screen and (max-width: 480px)').matches) {
// smartphone/iphone... maybe run some small-screen related dom scripting?
}
//测试 landscape orientation
if (matchMedia('all and (orientation:landscape)').matches) {
// probably tablet in widescreen view
}

响应式图片

1、最简单的方法是为图片赋予了max-width: 100%;和height: auto;属性，可以让图片按比例缩放，不超过其父元素的尺寸。Bootstrap 3定义为.img-responsive class。

Js代码

<img src="..." class="img-responsive" alt="Responsive image">

2、第一种方法不能解决图片模糊问题。使用CSS3的content属性，结合媒体查询，我们要为每种设备宽度分别准备图片。这种方法会下载多张图片。

Html代码

@media (min-device-width:992px) {
img[data-src-992px] { content: attr(data-src-992px, url); }
}
@media (min-device-width:1200px) {
img[data-src-1200px] { content: attr(data-src-1200px, url); }
}
<img src="image.jpg"
data-src-992px="image-992px.jpg"
data-src-1200px="image-1200px.jpg" alt="">

如果我们需要：

只下载需要的一张图片

语义化

可访问

向后兼容

面向未来技术。。。

3、picturefill插件

大小：1.8K

Demo： http://scottjehl.github.io/picturefill/

简洁：基于matchmedia库实现图片适配。在不支持js的浏览器下也有好的表现。

Js代码

<script src="//scottjehl.github.io/picturefill/external/matchmedia.js"></script>
<script src="//scottjehl.github.io/picturefill/picturefill.js"></script>

Html代码

<span data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
<span data-src="small.jpg"></span>
<span data-src="medium.jpg" data-media="(min-width: 400px)"></span>
<span data-src="large.jpg" data-media="(min-width: 800px)"></span>
<span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span>
<noscript>
<img src="small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
</noscript>
</span>

这种方法会根据屏幕大小下载特定的图片，不会将所有定义的图片都下载，所以不用担心带宽的问题。

改变屏幕的宽度，会下载适配的图片，在WEB端也有良好的表现。

4、srcset-polyfill插件

大小：7.42K

简介：使用这个插件的一个最重要的理由是：按需下载图片，避免移动端下载大图，减少访问带宽。

利用img的srcset标签，写法比较简洁。

Html代码

<img alt="The Breakfast Combo"
src="banner.jpeg"
srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w,
banner-phone-HD.jpeg 100w 2x"/>

屏幕宽度为1440px出现的是banner.jpeg，iphone5上出现的是banner-HD.jpeg，Nexus出现的是banner-HD.jpeg。

iphone上准备的图片要比web上的图片大一倍。

Web浏览器测试结果：只加载src中定义的图片

定义更精确的屏幕范围，

src属性中定义最小的图片(下面例子中的: banner.jpeg)

srcset属性中定义最小图片和它相关连的最大viewport宽度(下面例子中的: banner-HD.jpeg 640w)

srcset属性中定义更大的viewport宽度(下面例子中的: banner-phone.jpeg 1024w)

srcset属性中定义支持的最大图片且不标注viewport宽度(下面例子中的: banner-phone-HD.jpeg)

Html代码

<img alt="The Breakfast Combo"
src="banner.jpeg"
srcset="banner-HD.jpeg 640w, banner-phone.jpeg 1024w, banner-phone-HD.jpeg">

Web浏览器测试结果：除了加载src中的图片，还根据屏幕大小（测试浏览器宽度1440px）加载了banner-phone-HD.jpeg。iphone5上出现的是banner-phone.jpeg，Nexus出现的是banner-phone.jpeg。

5、对比 picturefill 和 srcset-polyfill

picturefill 文件更小（但是多了一个依赖库）；WEB端页面下载后改变窗口大小，会下载适配的图片。但是，由于是从span标签通过js转为img标签，所以web端图片加载比srcset慢慢慢慢。。。

srcset-polyfill语法简洁；页面加载后，图片不会重新下载，适配性没有picturefill好。

这个Demo可以看到两种效果：

页面加载时的资源请求状况

将窗口缩小又放大后，picturefill会不断请求适配图片，包括已经下载过的wedding-medium.jpg

6、Grunt的responsive images插件（暂时没用，先mark）

https://github.com/andismith/grunt-responsive-images

[Demo]http://andismith.github.io/grunt-responsive-images/

栅格系统

Bootstrap3的实现 http://v3.bootcss.com/css/#grid-options

Bootstrap 3中的新的网格系统允许根据设备大小通过变量来声明。

比如，你可以针对桌面环境设置4列布局，针对平板电脑设置2列布局，针对手机设置1列布局。

这样，你就可以很容易地控制你的页面的跨设备显示效果。

一个用Bootstrap3布局的网站示例

顶部导航

设置data-target="#b-menu-1"，对应导航。

Java代码

<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#b-menu-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Bootstrap website</a>
</div>
<div class="collapse navbar-collapse" id="b-menu-1">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span><b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>