`
suqing
  • 浏览: 183521 次
  • 性别: Icon_minigender_2
  • 来自: 杭州
社区版块
存档分类
最新评论

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

 
阅读更多

问题：同一个网页，在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 表示初始缩放。 

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

  

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

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

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

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

  

 

media query

根据不同的分辨率，引用不用的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方法的实现

/* 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技术。

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

 

 状态改变时监听

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。

使用方法如下：

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

  

//测试 '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。 

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

  

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

@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的浏览器下也有好的表现。 

<script src="http://scottjehl.github.io/picturefill/external/matchmedia.js"></script>
<script src="http://scottjehl.github.io/picturefill/picturefill.js"></script>
   
<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>

        <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
        <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标签，写法比较简洁。

<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)

<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"，对应导航。

 

<!-- fixed navigation bar -->
<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> <!-- /.nav-collapse -->
  </div> <!-- /.container -->
</div> <!-- /.navbar -->
同时boot可以定制折叠模式与水平模式的阈值

根据你所放在导航条上的内容的长度，也许你需要调整导航条进入折叠模式和水平模式的阈值。通过改变@grid-float-breakpoint变量的值或加入您自己的媒体查询CSS代码均可实现你的需求。

   

全屏问题：

bootstrap3的 .container做了适配定宽，可以添加一个id=“container”设置 #container { width: 100%; }

.row设置了margin-left: -15px; margin-right:-15px;所以某些状况下会出现横向滚动条，清除这条样式就可以了 .row { margin-left:0; margin-right:0; }

  

定制折叠模式与水平模式的阈值

根据你所放在导航条上的内容的长度，也许你需要调整导航条进入折叠模式和水平模式的阈值。通过改变@grid-float-breakpoint变量的值或加入您自己的媒体查询CSS代码均可实现你的需求。

  

 

表单

 

根据列的表单布局，使用更整洁的网格类

 

<div class="row">
  <div class="col-span-4">
    <label></label>
  </div>
  <div class="col-span-8">
    <input type="text"/>
  </div>
</div>

 

 

Canvas绘制

一个Demo

 

 

测试工具

在线测试你的网页 http://www.isresponsive.com/

这个测试工具也可以帮助你判断某些网站到底是用前端技术，还是服务端实现手机访问。

 

Adobe Edge Inspect CC

同步开发测试工具，付费版可协同多设备，实时同步浏览器、无需刷新。

 

 

模板

http://punyweblab.com/projects/bolt/

 

参考

http://alistapart.com/article/responsive-web-design

 

https://speakerdeck.com/addyosmani/mobile-workflow

http://mienflying.bitbucket.org/responsive/#intro

http://v3.bootcss.com/css/#grid-media-queries

 图片

http://css-tricks.com/responsive-images-hard/

https://github.com/scottjehl/picturefill

https://github.com/paulirish/matchMedia.js/

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

https://github.com/borismus/srcset-polyfill

http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content-1.html#processing-the-image-candidates

 tutorials

http://www.script-tutorials.com/responsive-website-using-bootstrap/

http://tmp.devcharm.com/pages/responsive-web-design-introduction

plus

https://plus.google.com/s/%23Responsive

 

Responsive Design Weekly 

http://responsivedesignweekly.com/

  • 大小: 651.1 KB
  • 大小: 427.3 KB
  • 大小: 44.2 KB
  • 大小: 56.1 KB
  • 大小: 29.2 KB
  • 大小: 40.3 KB
  • 大小: 10.2 KB
分享到：
| Android界面设计基本知识
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics