文档章节

Html开发之Viewport的使用

LCore
 LCore
发布于 2014/10/19 22:47
字数 911
阅读 14132
收藏 194

      近年来随着移动端的快速发展,越来越多传统的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浏览器即可看到在各个手机端上的效果:

© 著作权归作者所有

LCore
粉丝 11
博文 12
码字总数 14022
作品 0
北碚
程序员
私信 提问
加载中

评论(9)

开源中国最帅没有之一
开源中国最帅没有之一
如果用js布局,页面能缩放,当缩放不是乱了?
OSC首席键客
OSC首席键客
不是都用媒体查询解决吗?纯css。
LCore
LCore

引用来自“中奖啦”的评论

天猫做的是服务器层面的适配
嗯,这种方式应该是最早的方式了吧,毕竟手机屏幕有限,不可能按照web的版面样式照搬到手机上。更好的做法还是针对手机重做界面设计和布局
小武
小武
有点马马虎虎啊
nathanwu
nathanwu
js做?
TonyJian
TonyJian
如果只在客户端适配,是不是还得费一坨坨的流量呢
中奖啦
中奖啦
天猫做的是服务器层面的适配
实习导演
实习导演
有用
谭又中
谭又中
了解了...
移动端布局终极解决方案 ---- hotcss

距离上一次发文貌似有段时间了,可能是最近项目太忙,也可能是变懒了。。总之不管什么原因,开始我们今天的主题:移动端终极解决方案---hotcss(https://github.com/imochen/hotcss)! 介绍 ho...

小草先森
2018/10/30
0
0
网站开发流程以及HTML5简介(十)

第二大原因: 移动,移动还是移动 你可以称之为“直觉”,但是我认为移动技术将会变得更加的流行。我知道,这里有些非常疯狂的猜测,有些可能你也想到了 – Mobile是一个时尚!移动设备将占领...

博为峰教研组
2016/11/27
8
0
从零开始学 Web 之 移动Web(一)屏幕相关基本知识,调试,视口,屏幕适配

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

Daotin
2018/08/07
0
0
extjs与struts开发的项目

步骤 1、导入extjs有关的目录文件 2、登录页面.jsp提交action后返回main.jsp页面 main.jsp页面中导入extjs需要的页面(ext-all.cssext-all.jsext-lang-zh_CN.js),接着导入所有自己用extjs框架...

梅_95
2016/08/02
4
0
bootstrap引入的css和js

bootstrap引入的css和js 1. 引入css样式文件到HTML页面中 <link type="text/css" rel="stylesheet" href="bootstrap.min.css" media="screen"> 2. 如果需要使用Bootstrap一些插件的话,需要引......

ardong
2016/08/11
69
0

没有更多内容

加载失败,请刷新页面

加载更多

面试题:你简历中写到熟悉Spring源码,那你给我说说它用到了那些设计模式?

Spring作为业界的经典框架,无论是在架构设计方面,还是在代码编写方面,都堪称行内典范。好了,话不多说,开始今天的内容。 spring中常用的设计模式达到九种。 模板方法(Template Method)...

我最喜欢三大框架
31分钟前
1
0
Sentinel Dashboard中修改规则同步到Nacos

上一篇我们介绍了如何通过改造Sentinel Dashboard来实现修改规则之后自动同步到Apollo。下面通过这篇,详细介绍当使用Nacos作为配置中心之后,如何实现Sentinel Dashboard中修改规则同步到N...

程序猿DD
38分钟前
4
0
Jenkins发送测试报告邮件

简介:总结怎么使用Jenkins执行自动化测试后发送测试报告邮件 一、系统设置 1、在Jenkins安装Email Extension Plugin插件,如下图: 2、设置Extended E-mail Notification (1)进入“系统管理”...

shzwork
41分钟前
1
0
状态模式

//相当把一个State对象存到Context对象中,然后通过Context实例化对象调用保存的state对象去调用state的相应的方法 https://blog.csdn.net/syc434432458/article/details/51210361...

南桥北木
52分钟前
3
0
基于 Jenkins + JaCoCo 实现功能测试代码覆盖率统计

本文首发于:Jenkins 中文社区 使用 JaCoCo 统计功能测试代码覆盖率? 对于 JaCoCo,有所了解但又不是很熟悉。 "有所了解"指的是在 CI 实践中已经使用 JaCoCo 对单元测试代码覆盖率统计: 当...

Jenkins中文社区
59分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部