终端自适应js操作代码实例，不同屏幕比例尺寸

对于前端自适应方法较多，像百度，淘宝也有类似的结构框架来处理，但是在不使用他们的情况下，我们如何来处理？

对于设计师来说，或者优秀的前端开发者来说，当她看到我们做出来的页面有那么一丢丢的变形或者遮挡，都是不被允许的。之前看到有在开发之前通过强大的css来处理，网上也是很多。而我之前开发的一个项目，通过js也能很巧妙的处理不同的终端，屏幕尺寸不同导致的变形，遮挡，移位，等等。

resize : function(ww, wh) {

var context = this;

$( " .wrapper ") . show();

// var wp = context.$(".wrapper1").width();

// context.$('.scroll').width(wp * 14);

// if (this.scroll && !this.scroll.moved) {

// this.scroll.refresh();

// }

var ww = $( window) . width();

var wh = $( window) . height();

context . $( " .wrapper ") . height(wh);

context . $( " .item ") . width(ww);

context . $( " .item ") . height(wh);

// context.$('.scroll').height(wh);

context . $( " .wrapper ") . width(ww);

context . $( ' .wrapper1 ') . width(ww);

}

上面这段代码，关于iscroll的可忽略。上面代码，添加到框架中，500ms执行一次即可。其中如果尝试只修改ww或者wh，你会发现会是个灾难变形了！

我们放进项目框架中运行，会发现各种屏幕比例手机，都能够保证图片不会变形，但是新的问题是跳转页面会有页面铺满屏幕的一个明显过程，体验并不好。

所以，我们要在外层$(".wrapper")对他css进行设置display : none.  当它在500ms内，$(".wrapper").show(); 这样我们视觉基本看不到的时候页面铺满全屏。体验效果也就不会看到铺满的过程。

很快手机18:9屏幕尺寸就要来了，很希望能有各种不同的处理方法来解决不同终端，不同尺寸的解决方案，如果大家有其他方案在下愿意虚心学习，交流学习。