当用户在移动端体验产品时,会触发手机系统的横屏指令,我们给window.orientation取值,正负90表示横屏模式、0和180表现为竖屏模式;
indow.onorientationchange = function(){ switch(window.orientation){ case -90: case 90: alert("我现在是横屏:" + window.orientation); case 0: case 180: alert("我现在是竖屏:" + window.orientation); break; } }
样式可以用@media 去写:
//竖屏时使用的样式 @media all and (orientation:portrait) { body{ background:red; } } //横屏时使用的样式 @media all and (orientation:landscape) { body{ background:blue; } }