第一次手机端适配的踩坑分享

第一次手机端适配的踩坑分享

布局篇

由于我第一次，做一个比较完整的项目，而且项目还要适配手机端，所以在一刚开始的时候，我就想着做一个可以兼容手机端的布局，这样在使用媒体查询修改的样式的时候，只需要修改盒子的大小等，不必再去修改布局。所以在这大家可以使用vw和vh进行部署，大家也可以使用百分比，尽量避免使用px这个单位，因为如果你使用前者的话，盒子大小，字体大小等会根据你的屏幕大小变化，布局方面可以使用flex布局等，当然定位这些也可以使用，前者效果会好一些。
提醒大家一下，如果大家在pc端就使用vw和vh进行布局的话，当页面窗口的宽或者高这两个其中一个变化时，布局可能会发生错位，所以这里建议大家可以尝试一下宽高都使用vw。

色彩搭配篇

如果大家也是第一次适配手机端或者也是一个小白的话，在选择色系这一方面，不太建议选择浅色系，因为浅色系在PC端看起来可能好看一些，看起来内容也比较明显，这是因为电脑屏幕一般的亮度都比较高，手机端就不一样了，手机端的屏幕亮度大多都是自适应，所以你可能会遇到有些用户屏幕亮度比较低再加上手机屏幕也比较小，所以可能会看起来有一些吃力，所以大家可以尝试一下使用那种深色系，对比明显的，这样用户体验相对较好一些。还有一个就是大家在自己做页面的时候，如果对自己的审美没有十足的把握的话，不建议大家使用太多的背景图片，至于为啥，当你搭配图片的时候就知道了。哈哈哈！！！

手机端浏览器兼容问题

移动端浏览器的兼容问题倒不像PC端兼容IE 那样，相对就要简单很多，但是还是有一些需要注意的问题。

1、字体大小的问题

其实到现在，我还是有一个问题没有搞清楚，就是不知道为什么有些手机在微信中打开自己写的网页，字体大小不受自己的控制，按理来说，用微信6.0以上的版本打开一个网页，使用的浏览器都是内置的QQ浏览器，可是就是在有些手机上会出现这些问题，具体原因没用搞清楚，但是解决办法倒是有几个，一是定义字体大小的时候使用百分比，不要使用vw；二是定义字体大小可以使用rem，这个方法如何使用，可以自行百度，网上有一大堆的使用说明。

2、关于边框阴影的使用

一般来说手机端的浏览器对css3的属性支持度比较高，但是我发现了一个问题，直接上代码：

box-shadow: 0px 0px 10px #00000044;  //这个边框颜色在QQ浏览器上没有效果，建议大家避免使用此类颜色样式

虚拟键盘覆盖input输入框的问题

我在这里给大家说一个应急的方法，此方法仅适合于代码马上进行测试，没有时间修改的同学们。

 window.addEventListener('resize', () => {
        if (document.activeElement.tagName == 'INPUT') {
            //延迟出现是因为有些 Android 手机键盘出现的比较慢
            window.setTimeout(() => {
                document.activeElement.scrollIntoView();
            }, 100);
        }
    });

此方法会在屏幕可视窗口发生变化时，对所点击的input输入框添加scrollIntoView方法，让点击的内容出现在可是窗口。

这类问题有好多方法解决，这种方法并不是一个最优解，所以大家如果有时间的话，还是学习一下别的更好的方法。

总结

第一次适配手机端，确实有好多没有考虑到，本身做的页面不复杂，但是就这也出现了上述的几个问题，其中最致命的问题我没有写出来，因为我不知道如何表述，就是不知道为什么有些手机在微信里面打开这个页面之后，切换到qq邮箱里面查看邮件之后又给切回来之后，会自动刷新页面，这个问题我现在还不能解决，而上述的问题我所提供的方法，虽然简单，但是这也只是最基本的操作，每种方法的最优解由于时间，我并没有实现，我会在接下来的时间中深入了解一下手机端的页面布局设计。