这篇文章主要讨论了移动端页面渲染与布局的一些基本概念例如 viewport 和 css 像素, 这些内容是了解移动端页面适配的基本前提.

viewport是<meta>标签的一个属性，它提供有关视口初始大小的提示，仅供移动设备使用。也就是说只有清楚viewport的使用，才能更好的针对不同分辨率的设备进行移动端开发。

前两篇博客，把像素和viewport的概念讲清楚了。现在开始，用meta标签来设置viewport。

在众多的移动设备中，前端开发人员如何在不同屏幕大小，不同程度的高清屏下去百分百的还原设计稿，从来都不是一件简单的事情，需要考虑众多因素，权衡利弊，做出取舍，结合需求去选择最合适的方案。

1.安卓使用绝对定位布局与原生input有冲突 如果绝对定位的元素在最下面，键盘弹起时，绝对定位元素会在键盘上面 解决办法： 使用flex布局实现，有一个flex-shrink可使用 或者监听resize事件，将元素隐藏 {代码……

部分问题可参考：[链接] 失焦之后webview没有回到原来位置 {代码…} 不聚焦问题 如果引入了fastclick，那么需要修改源码，如下 {代码…} 如果还有问题，尝试监听input的focus，然后延时聚焦 {代码…} 如果没有…

不管是面试还是工作过程中，移动端的布局都比较常见，而移动端适配方法也是多种多样。一般来说，主要还是从viewport、rem、百分比几个点下手。

移动开发兼容问题整理笔记轻松掌握移动端web开发【尺寸适配】常用解决方案移动端页面适配———多方案解析如何在Vue项目中使用vw实现移动端适配

大家有没有发现淘宝的H5移动端没有使用任何rem和vw单位，而是和web端项目一样，使用的是px单位。虽然是px但它也很完美的将整个页面渲染了出来。那淘宝的FE是怎么实现的呢？

工作以后，大部分的业务工作都是基于移动端H5的，开发过程中学习了很多东西，遇到过许多问题，诸如rememcss pxdevice px等，本文纯属个人的归纳总结，如有问题，请指出亲喷~