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

HTML-Html开发之Viewport的使用的更多相关文章

  1. #笔记# 移动前端开发之viewport

    一般移动设备的浏览器都默认设置了一个 viewport ,并初始定义一个虚拟的layout viewport(布局视口),用于解决早期的页面在手机上显示的问题.下面我们来认识几个与 viewport  ...

  2. 移动前端开发之viewport,devicePixelRatio的深入理解

    移动前端开发之viewport的深入理解 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的met ...

  3. 移动WEB开发之viewport

    问题: 在codepen上写了一个响应式页面,调试的时候没有问题.结果放到网站上,在手机上打开之后竟然和在电脑中的布局是一样的.         查阅资料之后知道响应式布局应该有这样一句话:<m ...

  4. 移动前端开发之viewport的深入理解

    在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或 ...

  5. 转载:移动前端开发之viewport的深入理解

    原文作者:无双 原文链接:http://www.cnblogs.com/2050/p/3877280.html 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有 ...

  6. html5开发之viewport使用

    随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应用是最好的选择.然而,每一款手机有不同的分辨率,不同屏幕 ...

  7. (转)html5开发之viewport使用

    原文:http://www.php100.com/html/webkaifa/HTML5/2012/0831/10979.html 随着高端手机(Andriod,Iphone,Ipod,WinPhon ...

  8. 移动前端开发之viewport的深入理解(转载)

    本文为转载文章,原文网址:http://www.cnblogs.com/2050/p/3877280.html 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有 ...

  9. 移动前端开发之 viewport 的深入理解

    移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或响 ...

  10. 移动前端开发之viewport的深入理解(转)

    在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或 ...

随机推荐

  1. 关于在vue里使用脚手架空行、空格会报错的问题

    第一种方法: 重新用脚手架安装项目,在命令行里选择Use ESLint to lint your code?这项是输入  n 第二种方法: 找到build文件夹下的 webpack.base.conf ...

  2. pip安装报错解决

    使用pip安装docker-compose时报 unsupported operand type(s) for -=: 'Retry' and 'int' 错误,经过一番google后,发现使用升级s ...

  3. Python学习之pillow库入门

    http://python.jobbole.com/84956/ 我还是搬运工......

  4. eclipse的一些部署

    1. Eclipse导入一个项目Package Exporer-------右键------import------General------Existing Project into Workspa ...

  5. 由字符串反转(使用递归)引申出来一道Java面试题

    如何面试一个从事编程工作的开发人员既困难又乏味,幸好还有很多值得参考的指南,比如:<Joel Guerilla Guide to interviewing>,但最后雇佣与否,还得由你自己决 ...

  6. 学点编码知识又不会死:Unicode的流言终结者和编码大揭秘

    如果你是一个生活在2003年的程序员,却不了解字符.字符集.编码和Unicode这些基础知识.那你可要小心了,要是被我抓到你,我会让你在潜水艇里剥六个月洋葱来惩罚你. 这个邪恶的恐吓是Joel Spo ...

  7. hibernate-release-4.3.11.Final资源包介绍

    资源下载 hibernate-release-4.3.11.Final documentation 包  相关文档 lib  相关jar包 required --开发中必须要加入的包 optional ...

  8. 【UOJ #104】【APIO 2014】Split the sequence

    http://uoj.ac/problem/104 此题的重点是答案只与切割的最终形态有关,与切割顺序无关. 设\(f(i,j)\)表示前\(i\)个元素切成\(j\)个能产生的最大贡献. \(f(i ...

  9. SPOJ1811 && SPOJ1812

    SPOJ1811 && SPOJ1812 LCS && LCS2 非常神奇的两道题... 题目大意: 给定n个字符串,求最长公共子串 做法1: 后缀数组: 把字符串连起 ...

  10. [Codeforces #201] Tutorial

    Link: 传送门 代码量很少的一套思维题 A: 试一试发现最后状态一定是所有$min,max$间$gcd$的倍数 直接判断数量的奇偶性即可 #include <bits/stdc++.h> ...