JS判断横竖屏及禁止浏览器滑动条示例

 
定义一个变量 $horizontal 用于获取横屏模式下的提示元素，该元素样式可根据实际需求自定义。
获取当前文档对象 $document，用于后续绑定和解绑事件。
定义一个函数 preventDefault，其作用是阻止默认行为。
在 preventDefault 函数内部调用 e.preventDefault() 以阻止默认事件触发。
}; 
定义一个函数 touchstart，用于处理触摸开始事件。
在 touchstart 函数中，为 document 绑定 touchstart 和 touchmove 事件，并关联 preventDefault 函数以禁止滚动。
}; 
定义一个函数 touchend，用于处理触摸结束事件。
在 touchend 函数中，移除 document 上之前绑定的 touchstart 和 touchmove 事件，恢复滚动功能。
}; 
定义一个监听器函数 listener，接收类型参数 type。
如果 type 为 'add'，表示进入竖屏模式。
在竖屏模式下执行相关操作。
为 $horizontal 添加 'hide' 类，隐藏横屏提示。
移除 document 上的 touchstart 事件监听，允许触摸开始。
移除 document 上的 touchend 事件监听，允许触摸结束。
如果 type 不为 'add'，即进入横屏模式。
在横屏模式下执行相关操作。
移除 $horizontal 的 'hide' 类，显示横屏提示。
为 document 绑定 touchstart 事件，关联 touchstart 函数以禁止滚动。
为 document 绑定 touchend 事件，关联 touchend 函数以在触摸结束时恢复滚动。
} 
} 
定义一个方向变化处理函数 orientationChange。
根据 window.orientation 的值判断当前屏幕方向。
处理竖屏模式的情况。
当 orientation 为 0 时，视为竖屏。
当 orientation 为 180 时，同样视为竖屏。
调用 listener 函数并传入 'add' 参数，进入竖屏模式逻辑。
结束当前 case 分支。
处理横屏模式的情况。
当 orientation 为 -90 时，视为横屏。
当 orientation 为 90 时，同样视为横屏。
调用 listener 函数并传入 'remove' 参数（注：原文此处逻辑与注释可能不符，按原文保留），进入横屏模式逻辑。
结束当前 case 分支。
} 
} 
为 window 绑定 orientationchange 或 resize 事件，触发 orientationChange 函数，优先使用 onorientationchange 属性检测支持情况。
在 document 就绪后执行初始化逻辑。
如果用户以横屏模式进入界面，则提示只支持竖屏。
判断 window.orientation 是否为 90 或 -90，即横屏状态。
如果是横屏，调用 listener 函数并传入 'remove' 参数（注：原文此处逻辑与注释可能不符，按原文保留），执行横屏模式下的处理。
} 
});