移动web开发-1

作者: Imkata | 来源:发表于2022-03-11 17:24 被阅读0次

HTML基础
移动web开发-1
移动端交互优化问题（一）
Android 网络应用最佳做法
给移动端web开发设置viewport
移动web开发
移动web开发
移动Web开发
移动web开发
移动web开发

一. 移动web开发基础

1. 现状

浏览器现状

PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。

移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。

国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样。

总结：兼容移动端主流浏览器，只要处理好Webkit内核浏览器即可。

手机屏幕现状

移动端设备屏幕尺寸非常多，碎片化严重。Android设备有多种分辨率：480x800, 480x854, 540x960, 720x1280，1080x1920等，还有传说中的2K，4k屏。近年来iPhone的碎片化也加剧了，其设备的主要分辨率有：640x960, 640x1136, 750x1334, 1242x2208 等。作为开发者无需关注这些分辨率，因为我们常用的尺寸单位是 px 。

常见移动端屏幕尺寸：

移动端调试方法

Chrome DevTools（谷歌浏览器）的模拟手机调试
搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器
使用外网服务器，直接IP或域名访问

2. 视口

视口（viewport）就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口、理想视口

布局视口 layout viewport

一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。

iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。

视觉视口 visual viewport

字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。

我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。

理想视口 ideal viewport

布局视口很大，视觉视口就是我们手机屏幕的宽度，不同的手机屏幕宽度又不一样，所以我们需要一个理想视口。

通过meta视口标签通知浏览器操作就可以实现：（布局视口 = 视觉视口 = 手机屏幕的宽度） = 理想视口，最后得到的就是我们想要的理想视口。

最标准的viewport设置：

视口宽度和设备保持一致：content="width=device-width
不允许用户自行缩放：user-scalable=no
视口的默认缩放比例1：initial-scale=1
最大允许的缩放比例1：maximum-scale=1
最小允许的缩放比例1：minimum-scale=1

也就是如下代码：

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

3. 二倍图

什么是物理像素比？

物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的，这是厂商在出厂时就设置好了，比如苹果 6 是 750* 1334。我们开发时候的 1px 不是一定等于1个物理像素的，一个 px 的能显示的物理像素点的个数，称为物理像素比。

PC端和早前的手机屏幕/普通手机屏幕：1CSS像素= 1物理像素

lRetina（视网膜屏幕）是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。

什么是二倍图？

我们需要一个50* 50像素（css像素）的图片，直接放到我们的iphone8 里面会放大2倍 100* 100 就会模糊。

我们采取的是放一个 100* 100 图片，然后手动的把这个图片缩小为 50* 50 （css像素），这样就不会模糊了。

我们准备的图片比我们实际需要的大小大2倍，这种方式就是 2倍图。

对于一张 50px * 50px 的图片，在手机或 Retina 屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊，在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题。

通常使用二倍图，但是现在还存在3倍图4倍图的情况，这个看实际开发公司需求。

/* 在 iphone8 下面 */
img {
    /*原始图片100*100px*/
    width: 50px;
    height: 50px;
}

4. 移动端技术解决方案

移动端浏览器兼容问题

移动端浏览器基本以 webkit 内核为主，因此我们就考虑webkit兼容性问题，我们可以放心使用 H5 标签和 CSS3 样式，同时我们浏览器的私有前缀我们只需要考虑添加 webkit 即可。

移动端公共样式

reset.css 是一刀切，将所有的标签默认margin、padding重置为0，所有的默认样式，清空重置，格杀勿论，片甲不留，即使有些标签没有默认的值，即使有些标签用不到。

Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的 reset.css，Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上。

Normalize.css优点如下：

保护了有价值的浏览器默认值
react.css中所有元素样式被统一，没有个性，强行使得元素有相同的视觉效果，全部依赖于往后为元素单独设置的样式。Normalize.css保护了有价值的浏览器默认样式，跟不加Normalize.css样式的时候差别不大，但是消除了浏览器之间的差异，保证了各个浏览器兼容性。
修复了浏览器自身bug
Normalize.css修复了常见的桌面端和移动端浏览器的bug。包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。
拥有详细的文档
Normalize.css的代码基于详细而全面的跨浏览器研究与测试。这个文件中拥有详细的代码说明并在Github Wiki中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异，并且你可以更容易地进行自己的测试。这个项目的目标是帮助人们了解浏览器默认是如何渲染元素的，同时也让人们很容易地明白如何改进浏览器渲染。
不会让你的调试工具变的杂乱
使用 reset.css 最让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链。在Normalize.css中就不会有这样的问题，因为在Normalize.css的准则中对多选择器的使用是非常谨慎的，仅会有目的地对目标元素设置样式。
是模块化的
Normalize.css已经被拆分为多个相关却又独立的部分，这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。因此这能让你自己选择性地移除掉某些永远不会用到部分（比如表单的一般化）。

移动端公共样式，推荐使用Normalize.css。normalize vt. 使正常化，使规范化，使标准化

官网地址： http://necolas.github.io/normalize.css/

使用 CSS3 盒模型

传统模式宽度计算：盒子的宽度 = CSS中设置的width + padding + border。
CSS3盒模型：盒子的宽度= CSS中设置的宽度width，里面包含了 padding 和 border。

移动端大量使用 CSS3 盒模型，也就是说，我们的CSS3中的盒模型， padding 和 border 不会撑大盒子了。

/*传统盒模型，不包含border，所以是content-box*/
box-sizing: content-box;
/*CSS3盒模型，包含了border，所以是border-box*/
box-sizing: border-box;

传统 or CSS3盒模型？

移动端可以全部 CSS3 盒模型
PC端如果完全需要兼容，我们就用传统模式，如果不考虑兼容性，我们就选择 CSS3 盒模型

移动端特殊样式

/*CSS3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box;
/*a标签点击后，背景会高亮，我们需要清除 设置为transparent透明*/
-webkit-tap-highlight-color: transparent;
/*button在iOS移动端浏览器会有默认外观，去掉默认外观，加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance: none;
/*img和a，禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }

移动端布局方案

① 单独制作移动端页面（主流）

移动端和 PC 端各一份代码，移动端布局方式如下：

百分比布局
flex 伸缩布局
flex+rem 布局

通常情况下，网址域名前面加 m(mobile) 可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面。也就是说，PC端和移动端为两套网站，pc端是pc端的样式，移动端在写一套，专门针对移动端适配的一套网站

京东pc端：

京东移动端：

② 响应式页面兼容移动端（其次）

移动端和 PC 端共用一份代码，响应式的布局移动端和 PC 端会响应式变化从而适应不同的屏幕大小。

媒体查询
bootstarp

三星电子官网： www.samsung.com/cn/ ，通过判断屏幕宽度来改变样式，以适应不同终端。

响应式网站：即pc和移动端共用一套网站，只不过在不同屏幕下，样式会自动适配
缺点：制作麻烦，需要花很大精力去调兼容性问题

二. 移动端布局：传统百分比布局

通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。百分比布局方式是移动web开发使用的比较常见的布局方式。

当然为了保护内容，百分比布局也有宽高限制：

max-width 最大宽度，min-width 最小宽度
max-height 最大高度，min-height 最小高度

百分比布局案例：京东移动端首页

访问地址：m.jd.com
方案：我们采取单独制作移动页面方案
技术：布局采取百分比布局
代码地址：京东移动端百分比布局

三. 移动端布局：flex布局（CSS3）

CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。

1. 传统布局和flex布局对比

传统布局：

兼容性好，布局繁琐

flex布局：

操作方便，布局极其简单，移动端使用比较广泛
pc端浏览器支持情况比较差

总结：如果是pc端页面布局，还是采用传统方式，如果是移动端或者是不考虑兼容的pc则采用flex布局。

2. flex布局原理

采用 Flex 布局的元素，称为 Flex 容器（flexcontainer），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flexitem），简称"项目"。

flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局（不管是块级元素还是行内元素）。
当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
flex 容器，默认宽度是 100%，高度由子盒子撑起来，一般我们不设置宽度，需要时会设置高度，并且 flex 布局没有外边距合并的问题。
如果父容器是 flex 布局，不管子容器是块级元素、行内元素、行内块元素，都可以直接设置宽高，不用进行盒子类型转换。

3. 父项常见属性

① flex-direction 设置主轴的方向（即项目的排列方向）

在 flex 布局中，是分为主轴和侧轴两个方向，默认主轴方向就是 x 轴方向，水平向右，默认侧轴方向就是 y 轴方向，水平向下。

主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的，flex-direction可能的值如下：

② justify-content 设置主轴上的子元素排列方式

justify-content 属性定义了项目在主轴上的对齐方式 (justify vt. 证明…是正当的，对齐)

注意：使用这个属性之前一定要确定好主轴是哪个

注意：flex-direction:row-reverse 和 justify-content:flex-end 区别

比如：默认排列是 1 2 3 4 空格空格

设置flex-direction:row-reverse 是完全方向翻转，排列效果：空格空格 4 3 2 1，盒子顺序改变了。
设置justify-content:flex-end 只是从尾部开始排列，排列效果：空格空格 1 2 3 4，盒子顺序不变。

③ flex-wrap 设置是否换行

前面我们学了 white-space: nowrap; 强制一行显示文本。

默认情况下，项目都排在一条线（又称”轴线”）上，flex布局中默认是不换行的，如果一行装不下会缩小子元素的宽度。设置 flex-wrap: wrap; 如果一行装不下会自动换行。

④ align-items 设置侧轴上的子元素排列方式（单行）

该属性是控制子项在侧轴（默认是y轴）上的排列方式，在子项为单项（单行）的时候使用

设置拉伸stretch会自动拉伸，前提是没设置高度。（了解）

⑤ align-content 设置侧轴上的子元素的排列方式（多行）

设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），在单行下是没有效果的。

注意：align-items 和 align-content 区别

align-items 适用于单行情况下，只有flex-start、flex-end、center、stretch
align-content适应于换行（多行）的情况下（单行情况下无效），可以设置flex-start、flex-end、center、stretch、space-around、space-between

总结：就是单行找 align-items 多行找 align-content。

⑥ flex-flow

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。

flex-flow:row wrap; /* 就是默认情况的意思，默认x轴为主轴，换行 */

4. 子项常见属性

① flex 属性

子项目占的份数，如果不指定flex属性（比如设置了width），则不参与伸缩分配。

flex使用举例：

html结构：

<section>
    <div></div>
    <div></div>
    <div></div>
</section>

css布局：

section {
    display: flex;
    width: 60%;
    height: 150px;
    background-color: pink;
    margin: 0 auto;
}
/* 第一个盒子固定宽度 */
section div:nth-child(1) { 
    /* 把固定宽度切掉之后就是flex占用的宽度 */
    width: 100px;
    height: 150px;
    background-color: red;
}
/* 第二个盒子自由伸缩 */
section div:nth-child(2) {
    /* 由于只有一个子盒子设置flex，所以是总的是1份，这个盒子占1份 */
    flex: 1;
    background-color: green;
}
/* 第三个盒子固定宽度 */
section div:nth-child(3) {
    width: 100px;
    height: 150px;
    background-color: blue;
}