博客

H5移动端开发学习总结

  • Post author:
  • Post category:其他



有很长一段时间没有更新博客了，近一段时间开始重新梳理知识点和写博客了，新的博客地址：

欢迎访问

。

对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点：

1.首先，选取一款手机的屏幕宽高作为基准(现在一般选取iphone6的375×667)。之前项目中也用到过iphone5的320×568。

2.对于retina屏幕(如: dpr=2)，为了达到高清效果，视觉稿的画布大小会是基准的2倍，也就是说

像素点个数

是原来的4倍（对iphone6而言：原先的375×667，就会变成750×1334）。




viewport（视口）

###

3个视口

###


  • layout viewport（布局视口）

    :

    CSS初始包含块的尺寸

    。CSS中所有以百分比为单位的长度都是根据它推算出来的。如果把移动设备上浏览器的可视区域设为viewport的话，某些网站就会因为viewport太窄而显示错乱，所以这些浏览器就决定默认情况下把viewport设为一个较宽的值，比如980px，这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了。ppk把这个

    浏览器默认的viewport

    叫做 layout viewport。

    可以通过

    document.documentElement.clientWidth

    来获取。

  • visual viewport（视觉视口,即用户实际看见的部分）

    ：屏幕上显示的网页区域的尺寸，会被缩放影响，可以通过window.innerWidth来获取。

  • ideal viewport（完美视口）:

    完美适配移动设备的viewport，它的宽度等于

    移动设备的屏幕宽度

    。有了完美视口，用户不用缩放和拖动网页就能够很好的进行网页浏览。而完美视口需要通过viewport meta标签来进行相应的设置。

###

像素

###

一个像素就是计算机屏幕能显示一种特定颜色的最小区域。屏幕上的像素越多，同一时间你可以看到的就越多。


设备物理像素


设备屏幕的物理像素，任何设备的物理像素的数量都是固定的。他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。


CSS像素:px(设备独立像素)


逻辑像素，浏览器使用的抽象单位(之所以叫抽象单位，是因为其可以根据不同的设备和不同的关系来变大变小，所以称为抽象单位)为Web开发者创造的，在CSS和JavaScript中使用的一个抽象的层。

px是相对长度单位，相对的是设备物理像素(device pixel)



注意：

在旧的屏幕上，当缩放程度为100%时，一个CSS像素等于一个设备像素。但当在高密度屏幕上，例如苹果的视网膜屏幕，一个CSS像素跨越了多个设备像素。如果用户缩小到足够的程度，一个CSS像素会变得明显比一个设备像素小。


举个例子：


当给一个元素设置width:200px时，到底会发生什么事情？

这个width为200px的元素跨越了200个CSS像素。而200个CSS像素相当于多少个设备物理像素取决于

屏幕的特性(是否是高密度)和用户进行的缩放。


用户放大得越大，一个CSS像素覆盖的设备物理像素就越多。因此，这个元素不一定会跨越200个设备物理像素。例如：在苹果的视网膜屏幕上，视网膜屏幕的像素密度是普通屏幕的两倍，那么这个元素就跨越了400个设备物理像素。如果用户放大，它将跨越更多的设备物理像素。


再比如以iphone6为例：


设备宽高为375×667，可以理解为

设备独立像素

(或CSS像素)。

其dpr为2，根据上面的计算公式，其设备物理像素就应该×2，为750×1334。

###

位图像素

###

一个位图像素是栅格图像(如：png, jpg, gif等)最小的数据单元。每一个位图像素都包含着一些自身的显示信息(如：显示位置，颜色值，透明度等)。


理论上：1个位图像素对应于1个物理像素，图片才能得到完美清晰的展示。


在普通屏幕下是没有问题的，但是在retina屏幕下就会出现

位图像素点不够

，从而导致图片模糊的情况。对于dpr=2的retina屏幕而言，1个位图像素对应于4个物理像素，由于单个位图像素不可以再进一步分割，所以只能就近取色，从而导致图片模糊。

所以，

对于图片高清问题，比较好的方案就是两倍图片(@2x)。


如：200×300(css pixel)img标签，就需要提供400×600的图片。

如此一来，位图像素点个数就是原来的4倍，在retina屏幕下，位图像素点个数就可以跟物理像素点个数形成 1 : 1的比例，图片自然就清晰了(这也解释了之前留下的一个问题，为啥视觉稿的画布大小要×2？)。

###

屏幕尺寸

###

屏幕尺寸：指屏幕的对角线的长度，单位是英寸。

###

设备像素比(device pixel ratio)

###

设备像素比简称为

dpr

，其定义了物理像素和设备独立像素的对应关系。它的值可以按下面的公式计算得到：


设备像素比 ＝ 设备物理像素 / 设备独立像素



计算公式：

1px = (dpr)^2

dp;

获得设备像素比后，便可得知

设备像素

与

CSS像素

之间的比例。当这个比率为1:1时，使用1个设备像素显示1个CSS像素。当这个比率为2:1时，使用4个设备像素显示1个CSS像素，当这个比率为3:1时，使用9（3

3）个设备像素显示1个CSS像素。

在JavaScript中，可以通过

window.devicePixelRatio

获取到当前设备的dpr。而在CSS中，可以通过**-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio**进行媒体查询，对不同dpr的设备，做一些样式适配


为什么iPhone5是320px*586px？


就是因为其dpr = 2

dpr = 2表示一个CSS像素等于4个物理像素

所以：640dp

1136dp = 320px

568px

iphone5对外宣称的640*1136是物理像素，而我们实际开发中用的px是逻辑像素。

**DPI:**打印机每英寸可以喷的墨汁点


PPI(pixel per inch)：

屏幕每英寸的像素数量，即

单位英寸内的像素密度


PPI越高，像素数越高，图像越清晰。


ppi和dpi是同一个概念，Android比较喜欢使用dpi，IOS比较喜欢使用ppi。


但是可视度越低(小),系统默认设置缩放比越大

Retina屏(高清屏)：dpr都是大于等于2




meta标签


<meta>

标签有很多种，而这里要着重说的是viewport的meta标签，其主要用来告诉浏览器如何规范的渲染Web页面，而你则需要告诉它

视窗有多大

。

手机浏览器是把页面放在一个虚拟的”视口”（viewport）中，视口可大于或小于手机屏幕的可视区域，一般手机默认

viewport大于可视区域

。这样不会破坏没有针对手机浏览器优化的网页的布局，用户可以通过

平移和缩放

来看网页的其他部分。

设置页面窗口自动调整到设备宽度，并禁止用户及缩放页面 

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


上述属性基本含义：

  • width=device-width

    用来指定 layout viewport(

    布局视口

    ) 的大小,device-width 为设备的宽度。如果不指定该属性（或者移除viewport meta标签），则layout viewport宽度为浏览器默认值。如：iPhone为980px。 
<meta name="viewport" content="width=device-width" />

这样一来layout viewport将成为ideal viewport(完美视口)，因为layout viewport宽度与设备

视觉视口

宽度一致了。

除此之外，我们还可以通过设置initial-scale=1来实现ideal viewport。 

<meta name="viewport" content="initial-scale=1" />
  • initial-scale – 初始的缩放比例
  • minimum-scale – 允许用户缩放到的最小比例
  • maximum-scale – 允许用户缩放到的最大比例。1.0表示不缩放
  • user-scalable – 用户是否可以手动缩放,no表示不可以手动缩放

    示例图片


忽略将页面中的数字识别为电话号码：
 

<meta name="format-detection" content="telephone=no" />


忽略Android平台中对邮箱地址的识别:
 

<meta name="format-detection" content="email=no" />




给页面设置最大宽度和最小宽度

如果在页面中我们使用rem结合js动态计算font-size值来实现多屏幕适配，这种方式可以无限适配最大和最小的终端屏幕。但是当屏幕超过一定的尺寸以后还继续显示h5页面的话会给用户带来不好的体验。因此，我们需要给页面设置最大的宽度和最小宽度。


比如：
 

{
    max-width:640px;
    min-width:320px;
}




line-height属性的问题

line-height 的一个主要作用是：使得文本在父级元素中垂直居中。


属性值：

  • normal 默认。设置合理的行间距。
  • number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
  • length 设置固定的行间距。% 基于当前字体尺寸的百分比行间距。
  • inherit 规定应该从父元素继承 line-height 属性的值。

lineheight属性很有用，但是也存在一些问题： 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>lineheight</title>
	<style type="text/css">
		.box{
			font-size: 100px;
			border: 1px solid red;
			/*line-height: 100%;*/
		}
	</style>
</head>
<body>
<div class="box">我是超大字体</div>
</body>
</html>

这里写图片描述

从上图，我们发现字体和父元素上下之间有点小间距。这里我们可以通过给父元素设置line-height:100%来解决这个问题。

上下的小间距是由于line-height 与 font-size 的计算值之差造成的。当设置为line-height 的值为100%的时候，line-height的值就等于 font-size的尺寸，此时的空白间距为0。

这里写图片描述

##

小知识点

##


拨打电话代码：
 

<a href="tel:1234567890">打电话给:1234567890</a>


发短信代码：
 

<a href="sms:1234567890">发短信给:1234567890</a>


调用手机系统自带的邮件功能代码：
 

<p><a href="mailto:dlut123@126.com">发电子邮件</a></p>

##

rem自适应原理

##

rem是根据html的font-size大小来变化，正是基于这个出发，我们可以在每一个设备下根据设备的宽度设置对应的html字号，从而实现了自适应布局

###调整html元素大小的值###


有css与js两种方式



css方式：
 

html { 
font-size: calc(100vw / 3.75); 
}

除以3.75这里是以iphone6为设计稿为标准的，100vw表示设备宽度。为了使得html的字体大小为100px，这样我们在换算的时候，1px 就是0.01rem，就很方便我们计算。


js方式：


我们只需要监听resize事件即可 

document.documentElement.style.fontSize = document.documentElement.clientWidth/3.75 + 'px';
$(window).on('resize', function() {
   document.documentElement.style.fontSize = $(document.documentElement).width()/3.75 + 'px';
})

为了避免在一些手机浏览器上不支持calc，vm这些CSS3新属性，在实际应用中最好还是使用js方式。


相关参考博文：



移动端高清、多屏适配方案



移动前端第一弹：viewport详解



两个viewport的故事（第一部分）



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



深入了解viewport和px



走向视网膜（Retina）的Web时代



viewports剖析



利用视口单位实现适配布局


待续。。


版权声明：本文为liujie19901217原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。