怎么让PC端的页面快速适配手机端

我在最近做了一个工期很赶的官网项目，是PC端的，客户指定要用bootstrap2.3.1和jq1.9，在2020年的今天可以说很“原始”了，我甚至放弃了我原本用起来非常舒适的flex，全程用浮动和行内块在实现并排显示元素的。好不容易做了一些看起来还算精致的页面，突然客户居然提出个奇怪的问题——“你们的项目没有适配手机端”

？？？看到这一行字的我，内心是懵逼加崩溃的。设计稿是1920像素的宽度，主体部分宽度为1200像素，这是妥妥的PC端设计图啊，当初说的也是PC端的官网，并不是手机端的APP，小程序，或者微信公众号。这里先说一下，bootstrap其实很乖的，如果只是一列的布局，比如中间放个文章、放个单列的数据列表，显示还是正常的。然而问题出在首页等一些页面上，把中间的1200px的宽度占得严丝合缝，每一个细节几乎都是像素级还原设计图，这样，精致有了，弹性没了，布局是脆脆的，掰一下，就面目全非……电脑的宽度容下1200px没有问题，但手机的屏幕很窄，一到手机上看，就悲剧了。

所以怎么办呢？并没有手机端的设计图，好在客户的要求也不是很难，只是要求在手机上看的时候是电脑版的缩小版，显示得齐齐整整的，不要乱成一团即可。下面两个图，左边的是我调整前的样子，右边的是我调整后的样子。

下面来谈一谈我的方法吧。

有一种是比较科学的办法，很可惜我事后才想起。那就是px换成rem。为了方便计算，我使用的方法是：在网页加载完毕后，把屏幕的宽度除以19.2的值作为HTML的font-size，也就是让1920宽度的屏幕下，1rem的大小为100像素，在更小屏幕下，rem的大小等比例缩小（设计稿的宽度是1920，如果把设计稿分成19.2份，那么每份宽度为100。把设计稿上的100像素写成1rem，那么10像素就是0.1rem，这样计算起来很容易，而且由于更窄的屏幕宽度也是除以19.2来确定rem的，所以可以适配不同屏幕的大小）

但我用的办法是另一种，我并没有把px改成rem。我是从视口（viewport）这里下的手。适配手机离不开视口的设置，一般来说，电脑屏幕宽度很大，网页显示在电脑宽度才是完整的，所以在手机上看的时候，把电脑宽度那样的一千多像素显示到300多像素的手机上，必然要缩小才可以显示完整，所以手机上看到的字是缩小的。一般对视口的使用是把视口的宽度设为设备屏幕的宽度，也可以用固定值。

是的，我这里就是使用了固定值，因为我主体部分宽度是1200，所以视口大小如果等于手机屏幕宽度，那么只有300多，显然不够，效果肯定是惨不忍睹的。之前我做第一个手机端项目的时候曾经把别人做的同类项目代码拿一部分来用了，我当时用的单位是px，那个时候我还没学过rem，但是居然在不同屏幕的手机上效果都还可以，原因就出现在视口上——对viewport的设置我是拷过来的，并没有改，而这里视口的宽度默认值是320——也就是说，我写的px的大小都是按照iPhone5屏幕宽度来的，在更大宽度的屏幕上，显示出来的样子被整个等比例放大了，字变大了，图变大了，在更大宽度的手机上看起来毫无违和感。

所以这次的项目也应该把viewport设为一个合适的固定值。我第一个想到的是1920，因为是设计稿的宽度，结果在手机上看虽然缩小了，但是很不幸的，并不能显示完整。于是我使用了1366，就是我电脑的宽度，可以正常显示中间的1200，也没那么宽。果然在iPhone6等的手机上显示完整了，但是在iPhone5上仍然不完整。所以iPhone5需要更小的宽度，但是大于1200，最后我选择了1280。

那么问题又来了，iPhone5和其他手机需要的视口宽度不同，而对于电脑端，屏幕宽度大于1366的显示效果更佳，把视口宽度写死成1366再等比例缩放没必要，要怎么统一这些问题呢？

我使用的办法是用js判断屏幕宽度，根据屏幕宽度的情况动态地加上合适的viewport（默认是没有viewport的）。这样可以做到统一。注意判断屏幕宽度的时候不要用window.innnerWidth，因为这样得到的是屏幕的实际宽度，而手机的dpr大于1，实际宽度是大于我们看到的宽度的。

代码就像这样：（使用了jq）

// 判断屏幕宽度，动态设置视口，如果是大屏幕就不设置
if(window.screen.width < 360) {
	$('head').append('')
} else if(window.screen.width < 1366) {
	$('head').remove('[name="viewport"]')
	$('head').append('')
}
else {
	$('head').remove('[name="viewport"]')
}

即使是这样，在高度上，也可能还存在问题。首页的高度足够高了，无论是手机还是电脑，一屏的高度都无法显示完，但如果是内容很少的详情页，或者没有搜索到结果的列表页呢？

比如像这样，footer的部分是紧跟着内容显示的，在电脑上，由于屏幕比例的问题，这个页面可以显示超过一屏，但是在手机上，这些内容显得有限捉襟见肘了。屏幕的下半部分有大量尴尬的空白，footer悬在半空了。

效果是这样的——

这个问题的解决办法来自一本叫《CSS揭秘》的书。

我简单说一下解决的思路。

1.首先，让页面最外层的容器，也就是body作为flex容器:display: flex;为了让里面元素正常显示，记得设置flex的方向为垂直方向：flex-directive： column;

2.为了保证内容高度大于或等于屏幕高度，body就需要设置最小高度：min-height: 100vh;

3.关键的一步来了，现在虽然body高度是全屏了，但是主体部分如果高度还是太小，那么看起来footer还是很奇怪——所以必须让主体部分占据剩余的高度：flex:1;（我是准备一个叫main的class，有需要的时候加到元素上）

做了这三步之后，效果是这样的——

虽然还是有大段空白，但是footer显示在了屏幕底部，显示在了正确的地方，而且在不同高度的手机上都是这样的，比如下面这两个手机，明显空白的高度是不同的，而底部显示的效果是一样的。

最后补充一个小知识点，怎么在手机上看自己在电脑上写的本地网页。

我用的是anywhere。这个是一个命令行工具，首先你的电脑上要安装node.js，然后才能安装anywhere：npm install anywhere -g（因为是命令行工具，所以需要全局安装。）然后，进入你项目根目录，存放HTML文件的地方，按shift和鼠标右键，在当前目录打开cmd命令行工具。然后，运行anywhere命令，就可以了，它会告诉你一个url，并自动打开当前目录下的index.html、用手机访问这个url，就可以看到效果啦，当然手机和电脑要连到同一个WiFi才可以。