現在有一個需求：移動端網頁默認豎屏顯示，當用戶橫屏瀏覽，就給予相應提示，比如橫屏時顯示下面截圖提示信息
幾年前，可能大家想到用 window.orientation 屬性來實現，現官方已棄用，不做推薦，並且有了更好的實現方式—— orientation
orientation: portrait（豎屏，即設備中的頁面可見區域高度>=寬度）
orientation: landscape（橫屏，即設備中的頁面可見區域高度<=寬度）
下面是一個很簡單的 demo，有興趣的小伙伴可以感受一下
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>識別橫豎屏</title> <style> @media (orientation: landscape) { body { background-color: #ccc; } } @media (orientation: portrait) { body { background-color: #000; } } </style> </head> <body> </body> </html>