移动Web入门

来源：互联网发布：人工智能最新消息编辑：程序博客网时间：2024/06/05 22:53

随着智能手机的普及，web移动端的前景已经优于web电脑端。要跟随时代的潮流，那我们必然要学习web移动端的开发。

基础概念

简单的理解，viewport是严格等于浏览器的窗口。

在桌面浏览器中，viewport就是浏览器窗口的宽度高度。但在移动端设备上就有点复杂。

但在移动设备中，viewport太窄，为了能更好为CSS布局服务，所以提供了visual viewport（视觉的）和layout viewport（布局的）两个viewport。

layout viewport
如果把移动设备上浏览器的可视区域设为viewport的话，某些网站就会因为viewport太窄而显示错乱，所以浏览器默认情况下把viewport设为一个较宽的值，比如980px，这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了。这个浏览器默认的viewport叫做 layout viewport。
visual viewport
layout viewport 的宽度是大于浏览器可视区域的宽度的，所以我们还需要一个viewport来代表浏览器可视区域的大小，这个viewport就叫做 visual viewport。如下图中红线内区域就是浏览器的可视区域，也就是我们这里说的visual viewport。

图片来自互联网

在手机上浏览器的工作过程是这样的，当你输入一个网址后，浏览器会去请求这个资源，假设是一个HTML页面，那么浏览器会先在它的 layout viewport 里面渲染整个页面，然后把整个页面缩放至 visual viewport 的大小，最后供我们查看。

in（inch英寸）、cm（厘米）、mm（毫米）、pt（磅）、pc（pica）。

绝对长度单位，虽然理解起来很容易，但是在网页的设计中很少用到。所以我们就忽略它们吧。

网页设计中使用最多的长度单位，包括px、em、rem等。

px
全称pixel，在网页开发中一般指CSS像素，它是一种逻辑上的单位。这里要和图片的分辨中的px区分。
em
相对于当前对象内文本的字体尺寸，国外使用比较多。比如当前对象的字体大小为16px，那么1em = 16px。
rem
在W3C规范中是这样描述rem的：font size of the root element。简单的理解，rem就是相对于根元素<html>的font-size来做计算。

物理像素（physical pixel）
物理像素又被称为设备像素，简称px。它是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。正是这些设备像素的微小距离欺骗了我们肉眼看到的图像效果。如下图中每个手机对应的最小的单元格的宽度便是物理像素，显然不同的设备有着不同的物理像素。
设备独立像素（density-independent pixel）
设备独立像素也称为密度无关像素，简称dp、dip或dips。可以想象成是一个物理尺寸，使同样的设置在不同手机上显示的效果看起来是一样的。
CSS像素
CSS像素是一个抽像的单位，主要使用在浏览器上，用来精确度量Web页面上的内容。一般情况之下，CSS像素称为设备独立像素。

屏幕尺寸
屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米。常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等。

图片来自互联网
屏幕分辨率
指在横纵向上的像素点数，单位是px，1px=1个像素点。一般以纵向像素*横向像素来表示一个手机的分辨率，如1960*1080。（这里的1像素值得是物理设备的1个像素点）
屏幕像素密度
屏幕上每英寸可以显示的像素点的数量，单位是ppi，即“pixels per inch”的缩写。屏幕像素密度与屏幕尺寸和屏幕分辨率有关，在单一变化条件下，屏幕尺寸越小、分辨率越高，像素密度越大，反之越小。

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

iphone手机尺寸

<meta>标签有很多种，而这里要着重说的是viewport的meta标签，其主要用来告诉浏览器如何规范的渲染Web页面，而你则需要告诉它视窗有多大。在开发移动端页面，我们需要设置meta标签如下：

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

在html页面head部分加上面的代码，这是移动手机端开发的第一步。这句话的意思是告诉浏览器不要使用默认的布局viewport，而是设置viewport等于设备的宽度。设备的宽度是最好的viewport，这样页面的视觉效果最好。

如此，当我们写好一个页面后，就不会存在电脑上看正常，手机上看很小。initial-scale指缩放比例，如果不设置那么布局视图就会缩放到视觉试图，不会有滚动条；如果设置了就不有缩放，但是会出现滚动条。如果设置initial-scale=0.3，那么最后的视觉视图 = 布局视图 * 0.3。

虽然加上了如上的meta标签，但是还是存在诸多问题。其中最典型的便是Retina下，border:1px问题。

设计师想要的retina下border: 1px，其实就是1 物理像素宽，对于css 而言，可以认为是border: 0.5px;，这是retina 下(dpr=2)下能显示的最小单位。

然而，无奈并不是所有手机浏览器都能识别border: 0.5px，ios7 以下，android 等其他系统里，0.5px 会被当成为0px 处理。

这里给出一个手淘团队使用的方案，在整个手淘团队，有一个名叫lib-flexible 的库，而这个库就是用来解决H5 页面终端适配的。lib-flexible 是一个制作H5 适配的开源库。

GitHub地址：https://github.com/amfe/lib-flexible

阅读全文

0 0