移动Web基本知识

移动Web开发涉及到一些基本的概念和技术。在本文中，我们将介绍一些关键的知识点。

1. 像素基础

在移动Web开发中，像素是一个重要的概念。以下是一些与像素相关的基本知识：

• px: CSS像素，浏览器使用的抽象单位。
• dp, pt: 设备无关像素。
• devicePixelRatio: 设备像素缩放比例。

2. Viewport

Viewport是指移动设备上用于显示网页内容的区域。以下是一些关于Viewport的基本知识：

1. iOS的Viewport通常是980px；而安卓设备的Viewport大小则不确定。
2. 为什么不使用默认的980px布局Viewport？原因是宽度不可控制，不同系统设备的默认值可能不同，导致页面在缩小模式下显示不友好、链接不可点以及需要滚动。
3. 通过meta标签来改变默认Viewport的值。

3. Viewport meta标签

使用meta标签可以更改Viewport的默认值。以下是一些常用的Viewport设置：

lt;meta name"viewport" content"namevalue,namevalue"gt;
1. width: 设置布局Viewport的特定值，但为了适应不同尺寸的手机屏幕，通常使用device-width来自适应用户的屏幕大小。
2. initial-scale: 设置页面的初始缩放比例，公式为。
3. minimum-scale: 最小缩放比例。
4. maximum-scale: 最大缩放比例。
5. user-scalable: 用户是否可以缩放。

4. Viewport 编码

以下是一些关于Viewport编码的方案：

方案一：设备实际宽度设计（常用）

手机宽度320px。（按照这个尺寸重新设计）

方案二：flexbox弹性盒子布局

父元素使用display: -webkit-flex，子元素使用flex: 1来占据父容器的比例。

方案三：flex弹性盒子模型

通过指定width和flex属性来混合划分空间。

5. 弹性图片

移动Web中，弹性图片是一个重要的概念。以下是一些关于弹性图片的知识点：

• 使用max-width: 100%可以让图片在容器中自适应大小。

6. 移动Web样式特别处理

在移动Web开发中，有一些样式需要特别处理。以下是一些常用的处理方法：

1. 一像素边框：在Retina屏幕下，使用1px渲染边框会出现模糊的问题，可以使用0.5px渲染，并通过scaleY(0.5)进行缩放。
2. 相对单位rem：根据父节点的font-size来变化，可作为全局统一的度量单位。
3. 多行文本溢出：使用text-overflow: ellipsis和-webkit-box-orient: vertical等属性实现文本溢出省略号。

7. 300毫秒故事

移动Web上的click事件响应通常会有300毫秒的延迟。可以使用Tap事件代替click事件，或者使用库例如Zepto.js来解决这个问题。