开发移动端页面

移动端的视口宽度问题

视口是指浏览器的可视区域，移动端的视口到底是多宽呢？

现在市面上的大部分手机，比如iphone X，它的默认视口宽度为980px，而一个iphone X的屏幕宽度仅仅为375px。看到问题了吗？一个宽度只有375像素的手机，却能够显示宽度为980像素的网页，自然而然，网页会被缩小。

我们可以使用谷歌浏览器的移动端调试工具，来访问百度的搜索结果，可以看到网页明显被缩小了，而且页面宽度定格在980px。

面对这样的情况怎么办呢？我们当然希望手机的视口宽度和实际的屏幕宽度保持一致，就像PC端那样。好在HTML给了我们设置移动端视口宽度的能力，只需要在 head 元素中加入 meta 元素，即可设置移动端视口宽度（默认980px），代码格式如下：

然而，不同手机的实际宽度是不一样的，并不全都是iphone X的尺寸（375px），这又如何处理呢？

好在HTML给我们提供了一个关键字 device-width ，该关键是读取当前移动设备的宽度。因此，我们只需要使用下面的代码，即可让所有移动设备的视口宽度和其自身的宽度相等。

这样就解决了移动端视口宽度和自身宽度不一致的问题。

移动端误触造成的缩放问题

当用户用手指在移动端滑动网页的时候，手机往往提供下面的功能：

由于移动端误触较多，而我们的网页本来就是专门为移动端开发的，无论是尺寸还是各种样式，在默认的情况下已经非常合适了，根本不需要用户去缩放网页（你会发现，几乎所有app中的页面，都是不允许缩放的），因此，禁止用户对网页进行缩放是一个不错的选择。

具体的做法是在上一节中的 meta 元素中继续加入内容：

在上面这句代码中，出现了这一段代码： initial-scale=1.0, minimum-scale=1.0, maximum- scale=1.0, user-scalable=0 ，它们的意思分别是：

initial-scale=1.0 ：初始缩放比例为1.0（原始大小），这句代码的目的还不是放置用户缩放的，书写上它有其他复杂的原因，不过本文不涉及

minimum-scale=1.0 ：网页最小的缩小比例为1.0（原始大小），设置这句代码的目的是为了放置某些程序（比如JS）无意中修改了网页的缩小比例

maximum-scale=1.0 ：网页最大的放大比例为1.0（原始大小），设置这句代码的目的是为了放置某些程序（比如JS）无意中修改了网页的放大比例

user-scalable=0 ：这句代码才是不允许用户对网页进行缩放

移动端元素的尺寸问题

我们先看两张移动端网页的对比图：

上面的对比图，是同一个网页在不同尺寸手机中的效果。仔细观察，你会发现，网页中的很多元素，随着视口的宽度变大，尺寸也会随之变大，无论是字体、高度、间隙都有这样的特点。

这样做的目的，是为了保证网页元素在不同尺寸的移动端中，显示最优的尺寸。

这样一来，就要求我们在开发移动端的页面时，当遇到字体大小、宽高、margin、padding等尺寸类的属性时，不能设置固定的像素值。

不能设置像素值，那要设置什么值呢？百分比吗？

仔细思考，百分比也不行，比如字体设置为百分比，就以为着是相对于父元素的字体大小，只要父元素字体大小不变化，无论页面视口是多宽，字体大小不会发生任何变化。而且百分比计算起来极其繁琐，显然不是合适的选择。

考虑我们的需求，我们是要实现尺寸随着视口宽度的变化而变化于是，聪明的开发者想出这样一种办法。

1. 首先，写一段JS代码，应用到网页