随着近年来移动端的快速发展，越来越多的传统Web应用需要适配移动端。下面记录如何通过viewport实现不同类型移动端的简单适配。不过在此之前，先介绍一下如何通过Chrome浏览器在移动端调试效果。调试工具首先我们打开chrome谷歌浏览器，输入天猫地址（手机适配），按F12进入开发者模式。进入如下界面：接下来点击右下方红圈部分调出另一个控制台，如下：选择一个Device-设备，点击Emulate，然后刷新页面看效果，这里我选择的是iphone5，具体效果如下：可知天猫适配了移动端。支持移动端知道如何调试后，如何支持移动端。这里主要是通过Viewport来实现移动端的适配。其实，当我们仔细观察一些使用HTML5开发的手机应用或手机网页时，可能（有的可能没有通过viewport进行适配）发现如下代码：那什么是Viewport呢？手机浏览器将页面放在一个虚拟窗口-视口中，通常虚拟窗口比屏幕宽，这样就不用把每个网页都挤到一个小窗口里（这样会破坏网页的布局）未针对移动浏览器进行优化）。虽然此时显示还不完整，但用户仍然可以通过平移和缩放来查看网页内容。Viewport是让网页开发者通过它的尺寸来动态设置其网页内容中控件元素的大小，从而使浏览器达到与网页中一样的效果（缩放比例）。当然，更优秀的做法类似天猫的做法：重新设计和布局手机端的页面，毕竟手机屏幕有限，改进网页缩小比例的方法与最原始的方法相比，但是如何在小屏幕上进行呢？将最合适的内容展示给用户的设计才是最合适的。不过对于一些没有太多要求的，可以通过viewport轻松适配。Viewport语法width：控制视口的大小，一般指定为device-width（单位是缩放到100%的CSS像素），也可以指定固定值如600。height：对应width，指定高度.initial-scal：初始缩放比例，页面第一次加载时的缩放比例。maximum-scale：允许用户缩放到的最大比例。minimum-scale：允许用户缩放到的最小比例。user-scalable：用户是否可以手动缩放。Demo理解Viewport接下来我们实现一个小demo，网页版2048游戏的手机适配，网页上的效果如下：接下来的逻辑是通过实际设备尺寸来调整元素尺寸，核心代码:vardocumentWidth=window.screen.availWidth;vargridContainerWidth=0.92*文档宽度；varcellSideLength=0.18*文档宽度；varcellSpace=0.04*文档宽度；varheaderWidth=window.screen.availWidth;;单元格空间=20；单元格边长=100；headerWidth=500;}else{//在手机上附加处理headerheaderWidth=headerWidth*0.92;$('#grid-container').css('宽度',gridContainerWidth-2*cellSpace);$('#grid-container').css('高度',gridContainerWidth-2*cellSpace);$('#grid-container').css('padding',cellSpace);$('#grid-container').css('border-radius',0.02*gridContainerWidth);$('.grid-cell').css('宽度',cellSideLength);$('.grid-cell').css('高度',cellSideLength);$('.grid-cell').css('边框半径',0.02*cellSideLength);//设置标题$('.header').css('width',headerWidth);$('#newGame').css('宽度',headerWidth*0.20+'px');$('#topScore').css('宽度',headerWidth*0.40*0.90+'px');之后可以通过chrome浏览器在各个手机上看到效果：本文来自：http://my.oschina.net/LCore/blog/335189
