移动web开发笔记

Posted 2022-12-09 zhu_free

移动web开发笔记

• 移动web开发笔记
  • 基础概念
    • 像素单位
      • CSS pixels与device pixels CSS pixels
      • PPIDPI
      • devicePiexelRatio
    • 文字大小控制
    • viewport
  • 响应式布局
    • 原则
    • 实现方式
    • 布局方案
      • 百分比布局流体布局
      • 弹性flexible布局
      • flex-box布局
    • 图片处理
      • 普通设置
      • 响应式图片
    • 媒体查询
  • HTML5
    • 新表单类型
    • HTML5的新输入类型
  • CSS3
  • 设备控制
  • 设备交互
  • 性能优化

参考：
移动web开发入门
移动端web开发技巧

基础概念

像素单位

CSS pixels与device pixels CSS pixels

浏览器使用的抽象单位， 主要用来在网页上绘制内容。 device pixels： 显示屏幕的的最小物理单位，每个dp包含自己的颜色、亮度。 等值的 CSS pixels在手机屏幕上占多大的位置，这不是固定的，这取决于很多属性。经过分析和总结，我们可以得出这么一条公式：
1 CSS pixels = （devicePixelRatio）^2 device pixels
（^2是平方的意思，至于 devicePixelRatio是什么东西，后面会讲解） 。

PPI/DPI

PPI，有时也叫DPI，所表示的是每英寸所拥有的像素（pixel）数目，数值越高，即代表显示屏能够以越高的密度显示图像。（注：这里的像素，指的是device pixels。）搞清楚了PPI是什么意思，我们就能很容易理解PPI的计算方式了，我们需要首先算出手机屏幕的对角线等效像素，然后处以对角线（我们平常所说的手机屏幕尺寸就是说的手机屏幕对角线的长度），就可以得到PPI了。准确的计算公示大家可以参照下图。比较有意思的是，根据公式计算出来的iPhone 4的PPI为330，要比苹果官方公布的326要高一点点。

devicePiexelRatio

pixel - px ( picture element )

dpi / ppi - 每英寸像素 ( dot per inch )

dips - 设备独立像素 ( device-independent pixels )

devicePixelRatio - 物理像素 / dips 

文字大小控制

px, rem

固定大小 - px

多屏适配，统一修改 - rem
相对长度单位。相对于根元素(即html元素)font-size计算值的倍数

rem - font size of the root element (W3C)

viewport

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

<meta name="viewport"
      content="width=device-width,
               height=device-height,
               inital-scale=1.0,
               maximum-scale=1.0,
               user-scalable=no;"
/>

在苹果的规范中，meta viewport 有6个属性，分别如下：
- width - viewport的宽度［pixel_value |device-width］
- height - viewport的高度［pixel_value |device-height］
- initial-scale - 初始的缩放比例[float_value]christer1229
- maximum-scale - 允许用户缩放到的最大比例
- minimum-scalbujue - 允许用户的最小缩放值
- user-scalable - 用户是否可以手动缩放 ［yes | no］

响应式布局

原则

• 移动优先
• 渐进增强

实现方式

• 媒体查询
• 使用JS
• 使用第三方框架

布局方案

百分比布局(流体布局)

将元素原本的定宽除父容器的宽度得到百分比设置为宽度，使用百分比，文字使用 em。

• 优点：
  流动布局页面对用户更友好，因为它能自适应用户的设置。
  页面周围的空白区域在所有分辨率和浏览器下都是相同的，在视觉上更美观。
  如果设计良好，流动布局可以避免在小分辨率下出现水平滚动条。
• 缺点：
  设计者更难控制用户所见，并可能忽略掉一些错误，因为在特定的分辨率下看起来好的；
  图片，视频以及其他设置了宽度的内容可能需要多种宽度以适应不同分辨率的用户；
  在特别大的分辨率下，内容会被拉成长长的一行，变得难以阅读；
  会有画面失真问题

弹性（flexible)布局

用rem替代px
原理：定一个最大宽度，设备屏幕超过这个宽度之后，rem大小不再变化，否则，rem大小设置为屏幕宽度的几分之一，页面中的长度单位值用rem代替px，这样随着页面的宽度变化能够进行等比例缩放。
rem实际是页面根元素的字体大小，通过js改变rem值的代码如下：

;
( function( win ) ) 
    var doc = win.document;
    var docEl = doc.documentElement;//获取文档元素
    var tid;

    function refreshRem() 
        var width = docEl.getBoundingClientRect().width;//获取设备宽度
        if ( width > 540 ) 
            width = 540;
        
        var rem = width / 10;//设置rem为屏幕宽度的十分之一
        docEl.style.fontSize = rem + 'px';
    
    win.addEventListener('resize', function() //屏幕宽度改变时
        clearTimeout(tid);//清除之前的计时器
        tid = setTimeout(refreshRem, 300);//300ms后改变rem大小
    , false);

    win.addEventLister('pageshow', function( e ) //页面显示时
        if (e.persisted) 
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        
    , false);
    refreshRem();
)( window );

参考：移动端页面使用rem来做适配

flex-box布局

flex-box，参考：
Flex 布局教程：语法篇
优点：布局方便，灵活性高；
缺点：兼容性问题；

图片处理

普通设置：

img 
    max-width: 100%;

或：

img 
    width: 100%;
    max-width: 300px;
//限制最宽不超过300px；

响应式图片：

参考:
响应式图片srcset全新释义sizes属性w描述符
Srcset和sizes

即根据屏幕密度现实对应尺寸图片
src:指定资源（在浏览器不认识srcset和size时会加载这个）
srcset:srcset的值是可用图像版本的URL列表；每个图片的宽度都用w描述符来表明。
sizes：使用长度与媒体查询配合，浏览器会检测每一个媒体查询，直到匹配到为止。使用查询配合的长度作为“选择资源”拼图的最后一块：图像渲染宽度或者相对于视图。
eg.

<img src="small.jpg"
 srcset="large.jpg 1024w,
         medium.jpg 640w,
         small.jpg 320w"
 sizes="(min-width: 36em) 33.3vw,
        100vw"
 alt="A rad wolf" />

媒体查询

1. 可以通过<link>标签的media属性为样式表指定设备类型

<link rel="stylesheet" type="text/css" media="screen" href="screen-style.css">
<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="style.css"> //纵向屏幕
<link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css"> //宽度小于900px时

1. 在css中同样可以使用

@media screen and (max-width: 960px)
    body
        background: #000;
    

@media (max-width: 960px)
    body
        background: #000;
    

@media screen and (min-width:960px) and (max-width:1200px)
    body
        background:yellow;
    

1. @import方法
   @import可以引用样式文件，同样也可以用来引用媒体类型。@import引入媒体类型主要有两种方式，一种是在样式中通过@import调用另一个样式文件；另一种方法是在<head></head>标签中的<style></style>中引入，但这种使用方法在IE6~7都不被支持，如样式文件中调用另一个样式文件时，就可以指定对应的媒体类型。

@importurl(reset.css) screen;   
@importurl(print.css) print;

在<head>中的<style>标签中引入媒体类型方法。

<head>
<style type="text/css">
    @importurl(style.css) all;
</style>
</head>

为方便查阅，下面列出了所有可供媒体查询检测的特性
- width:视口宽度。
- height:视口高度。
- device-width:渲染表面的宽度（对我们来说，就是设备屏幕的宽度）。
- device-height:渲染表面的高度（对我们来说，就是设备屏幕的高度）。
- orientation:检查设备处于横向还是纵向。
- aspect-ratio:基于视口宽度和高度的宽高比。一个16∶9比例的显示屏可以这样定义aspect-ratio: 16/9。
- device-aspect-ratio:和aspect-ratio类似，基于设备渲染平面宽度和高度的宽高比。
- color：每种颜色的位数。例如min-color: 16会检测设备是否拥有16位颜色。
- color-index:设备的颜色索引表中的颜色数。值必须是非负整数。
- monochrome:检测单色帧缓冲区中每像素所使用的位数。值必须是非负整数，如monochrome: 2。
- resolution:用来检测屏幕或打印机的分辨率，如min-re一种检测 IE 是否加载完成的方式，使用 doScroll 方法调用，详情可见http://javascript.nwbox.com/IEContentLoaded/。
原理就是对于 IE 在非 iframe 内时，只有不断地通过能否执行 doScroll 判断 DOM 是否加载完毕。在上述中间隔 50 毫秒尝试去执行 doScroll，注意，由于页面没有加载完成的时候，调用 doScroll 会导致异常，所以使用了 try -catch 来捕获异常。
结论：所以总的来说当页面 DOM 未加载完成时，调用 doScroll 方法时，会产生异常。那么我们反过来用，如果不异常，那么就是页面DOM加载完毕了。solution: 300dpi。还可以接受每厘米像素点数的度量值，如min-resolution: 118dpcm。
- scan:电视机的扫描方式，值可设为progressive（逐行扫描）或interlace（隔行扫描）。如720p HD电视（>devide-width指屏幕宽高，width指渲染窗口宽高
720p的p即表明是逐行扫描）匹配scan: progressive，而1080i HD 电视（1080i中的i表明是隔行扫描）匹配scan: interlace。
- grid:用来检测输出设备是网格设备还是位图设备。
- 在上述所有特性中，除scan和grid之外，都可使用min和max前缀来创建一个查询范围。

HTML5

新表单类型

• placeholder
  只需在input元素中加入placeholder属性，其属性值就会默认显示为占位符文字，输入框获取焦点时该文字自动消失。当输入框失去焦点且没有任何输入值时，占位符文字则会再次显示。

• required
  在支持HTML5的浏览器中，在input元素中追加布尔类型的属性required（也就是说你可以选择追加或不追加该属性），则表明该表单域为必填项。如果表单提交时该必填项没有任何信息，浏览器则会显示警告信息。警告信息的显示方式（包括显示内容和样式）取决于浏览器与输入框类型。
  range、color、 button和hidden类型的输入元素则不能使用required，因为这几种输入类型几乎都有默认值。

• autofocus
  HTML5的autofocus属性可以让表单在加载完成时就有一个表单域被默认聚焦（或选中），以便于用户输入。
  例如有多个表单域追加了autofocus属性，在Chrome（v16）中会聚焦最后一个使用autofocus属性的表单域，而Firefox（v9）恰恰相反，会聚焦第一个使用autofocus的表单域。

• autocomplete

也可以通过给表单本身（不是fieldset）设置属性来禁用整个表单的自动完成功能。示例代码如下：

<form id="redemption" method="post" autocomplete="off">

• list（及对应的datalist元素）
  list属性以及对应的datalist元素可以让用户在输入框中开始输入值的时候，显示一组备选值。
  list属性中的值（awards）同时也是datalist元素的id。这样就可以让datalist与输入项关联起来。虽然将option包裹在select中不是必需的，但这样做便于为老版本浏览器提供降级方案。

HTML5的新输入类型

• type=”email”——支持它的浏览器会期望用户的输入匹配电子邮箱的格式。
• type=”number”——支持该特性的
  浏览器期望输入一个数字。这种输入类型默认还提供控制按钮，允许用户简单地点击向上或向下来改变数值。
  你可能注意到在上面的代码中，我们还设置了允许输入的最小值和最大值范围，具体代码如下：

type="number" min="1929" max="2015"

超出范围的数字会（应该）得到特殊对待。
- type=”url”——你猜对了，URL输入类型用于输入URL地址。
- type=”tel”是另一种用于收集联系人信息的输入类型。tel表示表单域期望输入一个电话号码- type=e=”search”——和普通文本输入框的表现基本一样，仅在个别浏览器中渲染得有点细微差别。
你可用pattern属性通过正则表达式来定义表单域的数据
- type=”color”——会在支持该特性的浏览器中生成一个颜色选择器，让用户可以选择十六进制的颜色值。
- 日期和时间输入类型
和color类型一样，目前对date提供原生支持的浏览器寥寥无几，大多数浏览器默认都将其渲染为标准的文本输入框。超级棒的Opera已经实现了这个功能
range输入类型会生成一个滑动条。

CSS3

笔记

设备控制

• 打开数字键盘
  <input type="tel">
• 隐藏地址栏
  setTimeout(function() window.scrollTo(0, 1); , 0);
• 在iPhone,iPad,iTouch的safari上可以使用添加到主屏按钮将网站添加到主屏幕上
  <link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-iphone4.png" />

设备交互

1. input fixed失效问题
   参考：
   iOS下的 Fixed + Input 调用键盘的时候fixed无效问题解决方案
   【小贴士】虚拟键盘与fixed带给移动端的痛！
   Web移动端Fixed布局的解决方案
   出现原因：
   移动端虚拟键盘出现的条件是：文本框（文本类）获得焦点，但是文本框获得焦点未必会弹出键盘；
   收起虚拟键盘的条件是：文本框失焦
   总而言之，我们认为会出现或者消失虚拟键盘的时候都可能不工作
   在移动设备上，如果文本框在上方，点击不会有什么问题：
   在设备的最下面的话，整个块会上移，以将input区域显示出来
   这个时候几个棘手的问题就出现了：
   ① 虚拟键盘的出现对页面来说是不可知的，这句话的理解是：没有键盘出现事件，没有办法获取键盘高度
   ② 键盘是“贴”在了viewport上，表面上不会对dom产生“任何”影响，但是这个时候一些定位元素的表现却变得“怪异”。

软键盘唤起后，页面的 fixed 元素将失效（即无法浮动，也可以理解为变成了 absolute 定位），所以当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了。

这便是 ios 上 fixed 元素和输入框的 bug 。其中不仅限于 type=text 的输入框，凡是软键盘（比如时间日期选择、select 选择等等）被唤起，都会遇到同样的问题。

解决方案：
使fixed的父元素不滚动，将滚动区域限制在与footer和header同级的内容部分。

性能优化

参考：移动开发规范概述
要考虑android低端机与2G网络场景下性能 注意！

发布前必要检查项

所有图片必须有进行过压缩
考虑适度的有损压缩，如转化为80%质量的jpg图片
考虑把大图切成多张小图，常见在banner图过大的场景

加载性能优化, 达到打开足够快

数据离线化，考虑将数据缓存在 localStorage
初始请求资源数 < 4
图片使用CSS Sprites 或 DataURI
外链 CSS 中避免 @import 引入
考虑内嵌小型的静态资源内容
初始请求资源gzip后总体积 < 50kb
静态资源(HTML/CSS/JS/Image)是否优化压缩？
避免打包大型类库
确保接入层已开启Gzip压缩（考虑提升Gzip级别，使用CPU开销换取加载时间） 注意！
尽量使用CSS3代替图片
初始首屏之外的静态资源（JS/CSS）延迟加载
初始首屏之外的图片资源按需加载（判断可视区域）
单页面应用(SPA)考虑延迟加载非首屏业务模块
开启Keep-Alive链路复用

运行性能优化, 达到操作足够流畅

避免 iOS 300+ms 点击延时问题 注意！
缓存 DOM 选择与计算
避免触发页面重绘的操作
Debounce连续触发的事件(scroll / resize / touchmove等)，避免高频繁触发执行 注意！
尽可能使用事件代理，避免批量绑定事件
使用CSS3动画代替JS动画
避免在低端机上使用大量CSS3渐变阴影效果，可考虑降级效果来提升流畅度
HTML结构层级保持足够简单
尽能少的使用CSS高级选择器与通配选择器
Keep it simple

在线性能检测评定工具使用指南

访问 Google PageSpeed 在线评定网站
在地址栏输入目标URL地址，点击分析按钮开始检测
按 PageSpeed 分析出的建议进行优化，优先解决红色类别的问题