Question

我正在使用3个测试设备开发我的第一个响应式网站：

htc欲望500双，
iphone6，
我的Windows笔记本电脑。

我正在测试各种'语言'：

css媒体查询
jquery的
角

测试时，angularjs在HTC中给出了奇怪的结果：

    @media screen and (max-width : 320px)
      { some_selector{ /* css that IS triggered */ } 
      }

    jQuery(document).on( 'ready ', 
                         function()
                            { alert( jQuery( window ).innerWidth()) ;   
                            }
                         ) ; // RETURN: 320

    my_app.controller( "my_controller" ,
                       function( $scope , $window )
                           { alert( $window.innerWidth ) ;
                           }
                     ) ;  // RETURN: sometimes 980, sometimes 320, sometimes 192

修改基于Jonathan的回答，我意识到这只是处理不同窗口属性的不同浏览器的老问题，特别是在文档加载阶段......（这基本上是每个人都采用jQuery的原因，尤其是jQuery(document).ready(...)处理程序）

对于角度my_app.controller(...)的调用是在 jquery的文档就绪阶段之前发生，当DOM仍在进行初始设置阶段时（如下面的示例所示）;

HTC与iphone不同的解释几乎可以肯定是因为我在htc中使用了firefox，而在iphone中使用了safari ......

my_app .controller( "my_controller" , function( $scope , $window ) { alert( $window.innerWidth + "," + window.innerWidth + "," + window.document.documentElement.clientWidth ) ; // returns 154,154,980 alert( $window.innerWidth + "," + window.innerWidth + "," + window.document.documentElement.clientWidth ) ; // returns 320,320,320 } ) ;

Answer 1

虽然angular有一个jQuery的内置版本，但它被称为jqLite，它没有jQuery的全部权重。简短版本是angular的$ window默认只是普通的Window object及其innerWidth property（见$WindowProvider）。

jQuery正在查看不同的属性来确定宽度。它这样做是为了尝试在浏览器之间规范化值。如果我们要examine jQuery's code (using v1.8.3 and up)，我们可以得出结论，它正在使用window.document.documentElement.clientWidth。

如果您想了解更多关于这两者之间的区别的信息，请参阅StackOverflow question。此外，如果您更喜欢jQuery如何计算它，您可以在$window.innerWidth的角度中切换$window.document.documentElement.clientWidth。

为什么angularjs和jquery为innerWidth

1 个答案: