浅谈项目中遇到的关于移动web的JS坑

因为项目需要，自己设计并构建了很多手机web的页面，现在就让我来吐槽一下其中遇到的坑，与君共勉。
1.手机横竖屏检测事件

    window.addEventListener('orientationchange', function(event){
   
    if ( window.orientation == 180 || window.orientation==0 ) {
        alert("竖屏");
    }
    if( window.orientation == 90 || window.orientation == -90 ) {
        alert("横屏");
    }
    });

这个事件是我们遇到手机横屏问题的时候经常会想到的事件，但是在使用的过程中，发现这个事件响应在IOS和android兼容不是很好，10次总要失败个2-3次，这简直要逼死强迫症啊，后来我发现有另一个事件能够完美的处理横竖屏转换，而且百试百灵。就是浏览器尺寸变化响应事件。

    window.onresize = function(){
   
             resizeS();//检测到窗口改变所做的对应操作（比如重新计算高度之类的，因为这个时候高度已经变为改变后的高度，而不是原来的高度了）。
    }

在使用这个事件的时候要注意的一点就是：谷歌浏览器中window.onresize 事件默认会执行两次（偶尔也会只执行一次，网上大部分说法认为这是Chrome的bug）。
所以为了避免产生这样的情况：一般来说推荐新建一个标志位 延时复位控制它不让它自己执行第二次。

    var firstOnResizeFire = true;//谷歌浏览器onresize事件会执行2次，这里加个标志位控制  
    window.onresize = function()  {
     
     if (firstOnResizeFire) {  
     resizeS();
     //0.5秒之后将标志位重置（Chrome的window.onresize默认执行两次）   
     setTimeout(function() {
    firstOnResizeFire = true;  
        }, 500);
    }  

这里我顺便贴出我对窗口尺寸改变之后所做的页面调整代码(这段代码我是用在我之前文章写的固定导航里的)，仅供参考

    function resizeS(){
   
         $(".container").height(document.body.clientHeight-$("#nav").height());//让页面内容完全显示，而不会因为固定导航栏的原因内容被挤到屏幕之外
         $(".screen_content").height(document.body.clientHeight-$("#nav").height());
        if(!$(".dd").is(".hide")){
            $(".dd").css("height","auto");
            if($(".dd").height() > $(".container").height()){
                $(".dd").height($(".container").height());
            }
        }
        $(".subitems").each( function(){
   if(!$(this).is(".hide")){
            $(