移动端屏幕旋转的事件和样式方案。
很多时候,当用户在移动端体验产品时,难免会触发手机系统的横屏指令,不可否认,横屏确实可以给用户带来更好的用户体验。
这里提供一些思路,我们给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 all and (orientation:portrait) {
.css{}
}
//横屏时使用的样式
@media all and (orientation:landscape) {
.css{}
}
--任何组织或个人分享、转载本博客内容,请务必以链接方式注明出处:来自博客园--下雨天的太阳(http://www.cnblogs.com/doomjx/)--
--请勿以任何形式修改内容(包括文字和图片)--

浙公网安备 33010602011771号