HTML-Html开发之Viewport的使用

近年来随着移动端的快速发展,愈来愈多传统的web应用须要适配移动终端,下面记录一下如何经过viewport实现简单的不一样型号的手机端的适配问题。不过在此以前,介绍一下如何经过Chrome浏览器,调试在移动终端上的效果。

调试工具

     首先咱们打开chrome谷歌浏览器,输入天猫地址(实现了手机端适配),按F12进入开发者模式。进入以下的界面:

    接下来点击右下方圈红的部分,能够调出另外一个控制台,以下界面:

 选择某个Device-设备,点击Emulate,以后从新刷新页面便可看到效果,这里我选中iphone5,具体效果以下：

    能够知道的是天猫是作了移动端的适配的。

支持移动端

       知道了如何进行调试以后,如何支持移动端呢。这里主要是经过Viewport来实现移动端的适配的。其实仔细观察一些使用HTML5开发手机应用或手机网页时,咱们可能（有些可能不是经过viewport来实现适配的）会发现以下代码：

<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />

      那么Viewport是什么呢?

        手机浏览器是把页面放在一个虚拟的窗口-viewport中的,一般状况下这个虚拟的窗口比屏幕宽,这样就不用吧每一个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局）,此时虽然显示不彻底,可是用户仍能够经过平移和缩放来看网页的内容。viewport就是让网页开发者经过其大小,动态的设置其网页内容中控件元素的大小,从而使得在浏览器上实现和web网页中相同的效果(比例缩小)。

        固然,更加优秀的作法是相似天猫的作法:针对手机端从新进行页面设计、布局,由于手机屏幕毕竟有限,按照web页面等比缩小的方式较之最原始有改进，可是如何在小屏幕上展现最合适的内容给用户的设计才是最贴切的。

        不过对于一些没有太多要求的,能够简单的经过viewport实现适配。

Viewport语法

         width:控制viewport的大小，通常状况下指定为device-width(单位为缩放为100%的CSS像素),也能够指定一个固定的值例如600.

         height:和width相应,指定高度。

         initial-scal:初始缩放比例,页面第一次load的时候的缩放比例。

         maximum-scale:容许用户缩放到的最大比例。

         minimum-scale:容许用户缩放到的最小比例。

         user-scalable:用户是否能够手动缩放。

Demo

         了解了Viewport接下来,咱们实现一个小Demo,web版2048游戏的手机适配,web上的效果以下图:

 接下来的逻辑即是经过实际的设备大小,调整元素大小,核心代码:

var documentWidth = window.screen.availWidth;
var gridContainerWidth = 0.92*documentWidth;
var cellSideLength = 0.18*documentWidth;
var cellSpace = 0.04*documentWidth;
var headerWidth=window.screen.availWidth;
function prepareForMobile(){
    if(documentWidth>500){
        //web端
        gridContainerWidth =500;
        cellSpace=20;
        cellSideLength=100;
        headerWidth = 500;
    }else
    {
        //手机端额外处理头部
        headerWidth = headerWidth*0.92;
    }
    $('#grid-container').css('width',gridContainerWidth - 2*cellSpace);
    $('#grid-container').css('height',gridContainerWidth - 2*cellSpace);
    $('#grid-container').css('padding',cellSpace);
    $('#grid-container').css('border-radius',0.02*gridContainerWidth);
    $('.grid-cell').css('width',cellSideLength);
    $('.grid-cell').css('height',cellSideLength);
    $('.grid-cell').css('border-radius',0.02*cellSideLength);
    //设置头部
    $('.header').css('width',headerWidth);
    $('#newGame').css('width',headerWidth*0.20+'px');
    $('#topScore').css('width',headerWidth*0.40*0.90+'px');
}

以后经过chrome浏览器便可看到在各个手机端上的效果: