移动端开发 根据设备方向加载不同样式

esybq

根据设备方向加载不同样式可以使用三种不同的方法，其一是CSS3所提供的新功能，操作起来方便快捷，唯一的不足就在于其兼容性不是很好，毕竟古老的浏览器都不兼容。第二种方法是使用window中的orientation属性以及方法，进行设备是否旋转的控制。相比之下，第二种方法比第一种的兼容要好一些，但是有限。最后一种倒是兼容性比较好，但是，性能却不是很好——利用计时器配合功能的实现，每隔一段时间检测一下当前屏幕的宽度和高度，并进行比较。 基本的思路说完了，开始我们三种不同方法的讲解： 第一种：CSS3媒体查询

2. <style type="text/css">
3. @media all and (orientation : landscape) {
4. body {
5. background: #f00;
6. }
7. }
8. @media all and (orientation : portrait){
9. body {
10. background: #0f0;
11. }
12. }
13. </style>

复制代码

第二种：利用window.orientation属性与onorientationchange事件。window.orientation :这个属性给出了当前设备的屏幕方向，0表示竖屏，正负90表示横屏（向左与向右）模式。

2. function updateOri(){
3. 　　var orientation=window.orientation;
4. 　　if(orientation == 90 || orientation == -90) {
5. 　　　　orientation="landscape";
6. 　　} else {
7. 　　　　orientation="portrait";
8. 　　}
9. 　　document.body.className = orientation; // 注意，此处直接为body设置了类名（需要与前面的结构样式配合）
10. }
11. window.addEventListener("orientationchange", updateOri, false);

复制代码

第三种方法：innerHeight —— 使用定时器“伪实时”地对比当前窗口的高(window.innerHeight)与宽(window.innerWidth)之比，从而判定当前的横竖屏状态。

2. function updateOri(){
4. 　　var orientation=(window.innerWidth > window.innerHeight)? "landscape" : "portrait";
5. 　　document.body.className = orientation;
7. }
9. setInterval(updateOri, 5000);

复制代码

欢迎互相沟通交流~独行冰海 Tips：对于innerHeight是存在兼容问题的 Firefox.Safari.Opera和Chrome均为此提供了4个属性：innerWidth、innerHeight、 outerWidth和outerHeight。在Safari和Firefox中，outerWidth和outerHeight返回浏览器窗口本身的尺寸（无论是从最外层的window对象还是从某个框架访问）。在Opera中，这两个属性的值表示页面视图容器的大小。而innerWidth和innerHeight则表示该容器中页面视图区的大小（减去边框宽度）。在Chrome中，outerWidth（outerHeight）与innerWidth（innerHeight）返回相同的值，即视口(viewport)大小而非浏览器窗口大小。 IE没有提供取得当前浏览器窗口尺寸的属性；不过，它通过DOM提供了页面可见区域的相关信息。 在IE以及Firefox、Safari、Opera和Chrome中，document.documentElement.clientWidth和 document.documentElement.clientHeight中保存了页面视口的信息。在IE6中，这些属性必须在标准模式下才有效；如果是混杂模式，就必须通过document.body.clientWidth和document.body.clientHeight取得相同信息。而对于混杂模式下的Chrome，则无论通过document.documentElement.clientWidth还是document.body.clientWidth（clientHeight同理）属性，都可以取得视口的大小。