移动端开发-viewport实现响应式设计

原创 2016年05月30日 17:22:50

1. 不使用viewport出现的问题

提到响应式设计,大家首先想到的可能是 Bootstrap , @media 。前者是一个响应式UI库,风格比较扁平化,类似的还有雅虎的Pure。@media是CSS3的属性,利用它可以在不依赖其他库的情况下实现响应式设计。如果你使用过媒体查询,应该熟悉下面的代码:

可查看github下载实例代码

        @media screen and (min-width: 960px) {
          body { background-color: blue; }
        }

        @media screen and (max-width: 960px) and (min-width: 500px) {
          body { background-color: red; }
        }

        @media screen and (max-width: 500px) {
          body { background-color: yellow; }
        }

我在body里加了一段话,在PC端效果如下:
开始:
这里写图片描述

缩小浏览器窗口:
这里写图片描述

再缩小浏览器窗口:
这里写图片描述

我把这样页面放到服务器上,用我的手机访问,我的手机屏幕宽度是414px。那么这个页面在我手机上应该是黄色。请看屏幕截图:
这里写图片描述

是蓝色的。那么问题来了,为什么媒体查询失效了呢。这是由于设备尺寸和Viewport尺寸不一致导致的。为了解释这个问题,首先我们要理解移动设备上的1px != css中的1px。

2. css中的px与移动设备的px

在css中我们一般使用px作为单位,在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素,这可能会造成我们的一个错觉,那就是css中的像素就是设备的物理像素。但实际情况却并非如此,css中的像素只是一个抽象的单位,在不同的设备或不同的环境中,css中的1px所代表的设备物理像素是不同的。影响css中px与设备px换算的因素主要有以下两个:

  • 设备尺寸
  • 用户缩放

设备尺寸
iphone3的分辨率为320x480,在iphone3上,一个css像素确实是等于一个屏幕物理像素的。从iphone4分辨率提高了一倍,变成640x960,但屏幕尺寸却没变化,这就意味着同样大小的屏幕上,像素却多了一倍,这时,一个css像素是等于两个物理像素的。其他设备类似。
用户缩放
当用户把页面放大一倍,那么css中1px所代表的物理像素也会增加一倍;反之把页面缩小一倍,css中1px所代表的物理像素也会减少一倍。你可以想象,css中的px是一个一个小格子,在缩放页面的时候,其实是在缩放每个小格子,而设备物理像素显然是大小不变的。

在移动端浏览器中以及某些桌面浏览器中,window对象有一个devicePixelRatio属性,它的官方的定义为:设备物理像素和设备独立像素的比例,也就是 devicePixelRatio = 物理像素 / 独立像素。css中的px就可以看做是设备的独立像素,所以通过devicePixelRatio,我们可以知道该设备上一个css像素代表多少个物理像素。在上面例子中增加js脚本:

window.alert(window.devicePixelRatio);

在PC端:
这里写图片描述

在我的手机上:
这里写图片描述

设备像素比是不同的。

3. 三种视口(viewport)

你可能以为我啰嗦这么多终于要进入正题了。咳咳,其实我还是想让你了解下面三个概念。如果你熟悉移动端开发,请跳过这节直接看4 ,如果你刚刚接触移动端开发,我建议你读下去,早晚你得了解。

3.1 布局视口(layout viewport)

移动设备上的浏览器认为自己必须能让所有的网站都正常显示,即使是那些不是为移动设备设计的网站。但如果以浏览器的可视区域作为viewport的话,因为移动设备的屏幕都不是很宽,所以那些为桌面浏览器设计的网站放到移动设备上显示时,必然会因为移动设备的viewport太窄,而挤作一团,甚至布局什么的都会乱掉。所以这些浏览器就决定默认情况下把viewport设为一个较宽的值,比如980px,这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了。这个宽度被称为布局视口(layout viewport),可以通过document.documentElement.clientWidth获得。

3.2 视觉视口(visual viewport)

虽然独立布局视口的创造很大程度地帮助了桌面网站到手机上的转移,但我们不能完全无视移动端设备的屏幕尺寸。一些CSS声明与用户见到的东西有关,而与CSS的初始包含块无关。并且,有时候知道用户看到了网站的哪些部分对web开发者会有帮助。视觉视口是用户正在看到的网站的区域,对于的javascript属性是window.innerWidth.
缩放会影响视觉视口的大小。当缩放程度是100%时,视觉视口与设备屏幕一样宽。放大使视觉视口变得更小,因为屏幕上显示的CSS像素更小了,而缩小会让视觉视口更大,因为屏幕上的CSS像素更多了。因此缩放程度和视觉视口的大小是逆相关的:放得越大,视觉视口越小。
注意:当用户缩放时,只有视觉视口的尺寸会发生改变,布局视口不会改变。移动端的缩放不会导致CSS布局被重新计算。

3.3 理想视口(ideal viewport)

现在越来越多的网站都会为移动设备进行单独的设计,所以必须还要有一个能完美适配移动设备的viewport。所谓的完美适配指的是,首先不需要用户缩放和横向滚动条就能正常的查看网站的所有内容;第二,显示的文字的大小是合适,比如一段14px大小的文字,不会因为在一个高密度像素的屏幕里显示得太小而无法看清,理想的情况是这段14px的文字无论是在何种密度屏幕,何种分辨率下,显示出来的大小都是差不多的。当然,不只是文字,其他元素像图片什么的也是这个道理。这个视口被称为理想视口(ideal viewport),这个尺寸是厂商确定的。
只有当网站是为手机准备的时候才应该使用理想视口。只有主动地往页面里添加meta视口标签时理想视口才会生效。如果没有meta视口标签声明,那么布局视口将会维持它的默认宽度,理想视口只有当显式地使用它的时候才会产生影响:

/这一行代码告诉浏览器,布局视口的宽度应该与理想视口的宽度一致
<meta name="viewport" content="width=device-width">

3.4 测试三种视口

在head标签中加入<meta name="viewport" content="width=device-width">,使布局视口宽度等于理想视口宽度,加入下面js代码进行测试。

    var ratio = window.devicePixelRatio;
    var layoutWidth = document.documentElement.clientWidth;
    var visualWidth = window.innerWidth;
    window.alert('devicePixelRatio: ' + ratio + ' || layout viewport: ' + layoutWidth + ' || visual viewport: ' + visualWidth);

PC端:
这里写图片描述
手机:
这里写图片描述

4 使用meta标签控制viewport实现响应式设计

移动设备默认的viewport是layout viewport,也就是那个比屏幕要宽的viewport,但在进行移动设备网站的开发时,我们需要的是ideal viewport。那么怎么才能得到ideal viewport呢?这就该轮到meta标签出场了。

4.1 设置meta标签

我们在开发移动设备的网站时,最常见的的一个动作就是把下面这个东西复制到我们的head标签中:

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

该meta标签的作用是让当前viewport的宽度等于设备的宽度,同时不允许用户手动缩放。meta标签中共有6个关键字:

  • width:可以用width来设置viewport的宽度,以替代那些不合适的默认宽度。我们可以给其设定一个固定大小,但设定成device-width更加明智一些,这样我们可以兼容不同大小的屏幕。
  • height:同width
  • initial-scale:控制默认的缩放比例,缩放是相对于ideal viewport来缩放的
  • minimum-scale:这个是用户可以缩放页面的最大比例
  • maximum-scale:这个是用户可以缩放页面的最小比例
  • user-scalable:如果设置了user-scalable=no,用户将无法对页面进行缩放

了解这些以后,我们在测试例子中的head标签中加入viewport,使理想视口宽度等于布局视口宽度:

<meta name="viewport" content="width=device-width">

PC端网页效果不变,手机端访问效果:
这里写图片描述
这是我们想要的效果了。

4.2 动态改变meta标签

第一种方法

可以使用document.write来动态输出meta viewport标签,例如:

document.write('<meta name="viewport" content="width=device-width,initial-scale=1">')

第二种方法

通过setAttribute来改变

<meta id="testViewport" name="viewport" content="width = 380">
<script>
var mvp = document.getElementById('testViewport');
mvp.setAttribute('content','width=480');
</script>
版权声明:本文为博主原创文章,未经博主允许不得转载。

移动端REM响应式模板及相应规范

移动端REM响应式模板及相应规范
  • hf123lsk
  • hf123lsk
  • 2017年04月26日 11:10
  • 462

HTML5+CSS3移动端响应式网页制作

1.响应式可以简单理解为:能够适应所有的设备屏幕 2.H5相较于XHTML增强了语义化。 3.Box-sizing:border-box;(内减模式) 4.固比的布局,固定的模块要用绝对定位的方式将其...
  • luohuaxinyue
  • luohuaxinyue
  • 2016年03月03日 21:36
  • 1818

PC端移动端兼容响应式布局页面的制作

之前已经制作了PC端固定布局和移动端流体布局的页面,这次的任务就是将一个页面制作成PC端移动端兼容响应式布局页面,是页面能在不同屏幕大小下呈现处不同最佳显示状态。 主要的过程就是对: 1.将w...
  • JinYF1992
  • JinYF1992
  • 2016年06月07日 14:58
  • 9520

【移动端】使用REM进行的响应式布局

工具ViewtoREM:PX转换到REM(自动预处理)REM的定义: rem是相对于根元素来设置字体大小的,这样就意味着,我们只需要在根元素确定一个参考值,在根元素中设置多大的字体,这完全可以根据您...
  • huanmeng122
  • huanmeng122
  • 2016年11月16日 08:23
  • 1286

移动web开发响应式布局总结

首先来理解三个概念。一、viewport深入理解 我们在开发移动设备的网站时,最常见的的一个动作就是把下面这个东西复制到我们的head标签中: 该meta标签的作用是让当前viewport的...
  • zerlinda_c
  • zerlinda_c
  • 2015年12月17日 19:02
  • 3648

初学者如何写移动端响应式布局

一、百分比布局刚入前端坑的时候就是使用百分比布局,觉得百分比布局可以解决移动端的响应式布局问题,但是图样图森破,最常见的情况莫过于设计师说:“你没有按照我的设计稿来做呀”然后就是设计师在我旁边,我们一...
  • sunshine940326
  • sunshine940326
  • 2017年01月06日 16:38
  • 2651

关于移动端适配的几个方法,快速构建响应式网站必备知识

随着移动端的发展,手机端的页面应用越来越广泛,所以我们现在更多的是做移动端的页面。 但是我们同样要维持pc端,因此难免会遇到许多麻烦。 而且现在做移动端适配的方法也有好多种,针对不同的网站我们需要...
  • wushaoxion
  • wushaoxion
  • 2016年09月26日 22:42
  • 2729

移动端响应式布局通用代码

移动端响应式布局通用代码
  • aVeCathleen
  • aVeCathleen
  • 2015年12月08日 18:09
  • 940

响应式Web设计读书笔记与实践

前段时间在微博上看到了几个在当今前端圈中的大牛的撕逼大战,作为一个前端小白来说就只是看热闹的,热闹中看到了两本书,《无懈可击的Web设计》和《响应式Web设计》,前者没有买到纸质版,后者刚好在快要缺货...
  • liujianhuan0622
  • liujianhuan0622
  • 2016年02月26日 11:24
  • 1766

浅谈meta viewport设置移动端自适应

1、viewport 移动设备上的viewport是设备屏幕上用来显示网页的那部分区域,再具体一点就是浏览器上用来显示网页的那部分区域,但viewport又不局限于浏览器可视区域的大小,它可能比浏览...
  • zhouziyu2011
  • zhouziyu2011
  • 2017年03月06日 10:25
  • 7888
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:移动端开发-viewport实现响应式设计
举报原因:
原因补充:

(最多只允许输入30个字)