H5移动端开发学习总结

时间 2019-11-29

标签 h5 移动开发学习总结栏目无线繁體版

原文原文链接

对于移动端开发而言，为了作到页面高清的效果，视觉稿的规范每每会遵循如下两点： 1.首先，选取一款手机的屏幕宽高做为基准(如今通常选取iphone6的375×667)。以前项目中也用到过iphone5的320×568。 2.对于retina屏幕(如: dpr=2)，为了达到高清效果，视觉稿的画布大小会是基准的2倍，也就是说像素点个数是原来的4倍（对iphone6而言：原先的375×667，就会变成750×1334）。css

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。html

位图像素一个位图像素是栅格图像(如：png, jpg, gif等)最小的数据单元。每个位图像素都包含着一些自身的显示信息(如：显示位置，颜色值，透明度等)。理论上：1个位图像素对应于1个物理像素，图片才能获得完美清晰的展现。在普通屏幕下是没有问题的，可是在retina屏幕下就会出现位图像素点不够，从而致使图片模糊的状况。对于dpr=2的retina屏幕而言，1个位图像素对应于4个物理像素，因为单个位图像素不能够再进一步分割，因此只能就近取色，从而致使图片模糊。因此，对于图片高清问题，比较好的方案就是两倍图片(@2x)。如：200×300(css pixel)img标签，就须要提供400×600的图片。如此一来，位图像素点个数就是原来的4倍，在retina屏幕下，位图像素点个数就能够跟物理像素点个数造成 1 : 1的比例，图片天然就清晰了(这也解释了以前留下的一个问题，为啥视觉稿的画布大小要×2？)。前端

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

设备像素比(device pixel ratio) 设备像素比简称为dpr，其定义了物理像素和设备独立像素的对应关系。它的值能够按下面的公式计算获得：设备像素比＝设备物理像素 / 设备独立像素计算公式： 1px = (dpr)^2dp; 得到设备像素比后，即可得知设备像素与CSS像素之间的比例。当这个比率为1:1时，使用1个设备像素显示1个CSS像素。当这个比率为2:1时，使用4个设备像素显示1个CSS像素，当这个比率为3:1时，使用9（33）个设备像素显示1个CSS像素。在JavaScript中，能够经过window.devicePixelRatio获取到当前设备的dpr。而在CSS中，能够经过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询，对不一样dpr的设备，作一些样式适配为何iPhone5是320px586px？就是由于其dpr = 2 dpr = 2表示一个CSS像素等于4个物理像素因此：640dp1136dp = 320px*568px浏览器

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

DPI:打印机每英寸能够喷的墨汁点 PPI(pixel per inch)：屏幕每英寸的像素数量，即单位英寸内的像素密度 PPI越高，像素数越高，图像越清晰。 ppi和dpi是同一个概念，Android比较喜欢使用dpi，IOS比较喜欢使用ppi。可是可视度越低(小),系统默认设置缩放比越大 Retina屏(高清屏)：dpr都是大于等于2ide

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方式。