前端移动页面开发屏幕适配

调试工具chrome：

调试工具用chrome我觉得就可以了，直接开发者工具转到手机调试页面，chrome不仅可以模拟随意缩放手机页面宽度和高度，还可以选择iphong等各种手机型号来模拟。

不过chrome默认中文最小的字号是12px，当小于12的时候都会以12px来显示，这就导致当屏幕宽度调整到384以下的时候，屏幕上还是以12px来显示。
网上一般解决的办法是在body里面加上-webkit-text-size-adjust:none;或者-webkit-text-size-adjust:100%;调用内核解决这个问题。不过chrome在27.0版本以前支持这个属性，但是在以后的版本就不支持了。

这个其实也不算chrome的bug，因为毕竟汉字不比英文，很小的时候就看不太清楚。要解决这个问题很简单，就只需要在chrome里面设置最小字号就行了：设置-高级设置-最小字号。将最小字号调整到10px就行了，这样能适应的最小屏幕宽度是320(一般小于320的屏幕不需要考虑)。
另一个问题就是有时候你会在代码里面加入overflow：scroll；这时候在手机上滑动页面的时候就不太流畅。可以在body加上-webkit-overflow-scrolling:touch;调用硬件内存可以使滑动页面流畅，不过需要消耗更多的资源。

 

使用rem作为单位写页面：

rem是相对于html根元素的单位，即1rem=html根元素的font-size值。用rem作为页面的宽高单位就可以根据屏幕宽度的变化来及时适应。
根据屏幕宽度来调整html根元素的font-size（即rem）需要一段js代码：
(function (doc, win) {
var docEl=doc.documentElement;         //documentElement 属性是根节点
resizeEvt='orientationchange' in window ? 'orientationchange': 'resize';
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 640) + 'px';//设置html根元素的font-size
};

if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

 

在调试工具上调试好后要在手机上试一试，毕竟真实环境和调试的不一样。两者是一定会有差异的，这样的差异不可避免。
在写移动页面的时候要严格要求自己，毕竟手机页面就那么大，一定要每1px都要不能差。尽量做到完美才能有所进步。