在手机端,当用户将手机转屏的时候,你制作的HTML的页面能被转屏后支持吗?估计很多开发者想兼容,却被卡在了转屏检测,也就是横屏竖屏判断这个环节,怎么知道用户此时的手机设备屏幕是横屏状态还是竖屏状态?
今天就来整理一下js和css判断竖屏还是横屏的方法
css:
- @media screen and (orientation: portrait) {
- /*竖屏...*/
- }
- @media screen and (orientation: landscape) {
- /*横屏...*/
- }
js:
- window.onload = function(){ //初次加载
- isD();
- }
- window.addEventListener("resize", function(){ //屏幕宽度发生变化
- isD();
- });
- function isD(){
- if (window.orientation === 180 || window.orientation === 0) {
- // 正常方向或屏幕旋转180度
- console.log('竖屏');
- };
- if (window.orientation === 90 || window.orientation === -90 ){
- // 屏幕顺时钟旋转90度或屏幕逆时针旋转90度
- console.log('横屏');
- }
- }
相关知识点: