Fork me on GitHub

移动web的简要知识

发表于 | 分类于

viewport

viewport，翻译为中文可以叫做“视区”，大家都知道移动设备的屏幕一般都比PC小很多，webkit浏览器会将一个较大的“虚拟”窗口映射到移动设备的屏幕上，默认的虚拟窗口为980像素宽（目前大部分网站的标准宽度），然后按一定的比例（3：1或2：1）进行缩放。也就是说当我们加载一个普通网页的时候，webkit会先以980像素的浏览器标准加载网页，然后再缩小为490像素的宽度。注意这个缩小是一个全局缩小，也就是页面上的所有元素都会缩小。他有以下几个属性

  • width 控制 viewport 的大小，一般为了自适应设置为device-width
  • height 一般为了自适应设置为device-height
  • target-densitydpi 设备的默认缩。打个比方说，一张320*480的图片，放在iphone4里面，默认是占满屏幕的，但如果定义了target-densitydpi=device-dpi，那么图片只占屏幕的四分之一（二分之一的平方），因为iphone4的默认缩放比例为2(查上表)。
    他可以设置的之如下：
  • low-dpi – 使用ldpi作为目标 dpi。中等像素密度和高像素密度设备相应放大
  • medium-dpi – 使用mdpi作为目标 dpi。 高像素密度设备相应放大， 像素密度设备相应缩小。 这是默认的target density.
  • device-dpi 使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。
  • high-dpi 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小
  • initial-scale 初始缩放，如果你设置初始缩放为“1.0”，那么，web页面在展现的时候就会以target density分辨率的1:1来展现
  • maximum-scale 最大缩放。即允许的最大缩放程度。这也是一个浮点值，用以指出页面大小与屏幕大小相比的最大乘数。
  • user-scalable 用户调整缩放。即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变，反之为no。

常见viewport设置

1
<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

移动Web布局三种方法

  1. fixed

实现原理就是header和footer部分都为fixed定位。内容页面可以使用-webkit-overflow-scrolling:touch来进行滚动，当然，对于不支持的，也可以使用iscroll来兼容

  1. absolute

和fixed一样，只不过将fixed定位设为绝对定位。设定其left,right等值。下面有一个绝对定位的DEMO。

  1. flexbox

flexbox布局我估计是仿照flex*布局方式。由于主流移动端都使用的现代浏览器都支持这个CSS3属性。Flexbox布局俗称伸缩布局，它可以简单快速的创建一个具有弹性功能的布局。由于移动多终端的需求，所以首选是flexbox。

背景图片

background-size设置为高度，自适应宽度100%，这也是CSS3的属性。

文字

  1. px单位

传统PC端常用的px来设置大小。因为他比较稳定和精确。

  1. em单位

浏览器中放大或缩放浏览页面时会存在一个问题，因为字体大小是固定了的。要解决这个问题，我们可以使用“em”单位。 em有如下特点：

  • em的值并不是固定的;
  • em会继承父级元素的字体大小。
  1. rem单位

rem是CSS3的属性，和em一样，他的值是不固定的。区别在于他参考的是一个根元素的确定值。em是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小，在我们多次使用时，就会带来无法预知的错误风险。而rem是相对于根元素html，这样就意味着，我们只需要在根元素确定一个参考值。

在了解了px,em,rem的区别后，我们可以进行如下设置：

1
2
html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; }

我们在写大小的时候通过一些简单的计算就可以了，比如的拿到的设计稿有一一部分为18px的文字，那我们在写代码的时候就可以写：

1
p : {font-size:18px；font-size:1.8rem}/*(1.8 x 10=18)*/

动画

移动端动画优先选择为以下顺序：
transition > Animation > js

一些事件

移动端原生的最重要的事件touch ：

  • touchstart
  • touchmove
  • touchend
  • touchcancel

其中，他们之间触发的先后顺序为：
touchstart > touchmove > touchend > click
移动端click会延迟300ms，原因是他在等待判断是不是双击。当然，现在的一些框架解决了这个问题：

用这几个事件可以衍生出很多事件，比如左滑右滑，上下滑屏，放大，缩放等。现在已经有一些封装了的框架：

当然还有其他移动端专属的事件，比如：

  • 触摸事件
  • 屏幕旋转事件

参考网站：