モバイル端末の横画面・縦画面機能を決めるHTML5実戦と解析

携帯電話を頻繁に使用する私たちは、水平画面と垂直画面の概念に慣れ親しんでいますが、今日は、Menglong がそれを共有します。

CSSを使用して、水平方向と垂直方向の画面の問題を判断します。 CSSコードは以下の通りです

    1、
    @media (orientation: portrait) { } 横屏
    @media (orientation: landscape) { }竖屏
    
    2、
    <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">横屏
    <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">竖屏

JavaScriptを使用して、水平画面と垂直画面の問題を判断します。 JavaScript コードは次のとおりです

//判断手机横竖屏状态：
function hengshuping(){
  if(window.orientation==180||window.orientation==0){
        alert("竖屏状态！")       
   }
if(window.orientation==90||window.orientation==-90){
        alert("横屏状态！")        
    }
 }
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);

//移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态。
从而根据实际需求而执行相应的程序。通过添加监听事件onorientationchange，进行执行就可以了。

上記は、モバイル端末の水平および垂直画面機能を決定するための HTML5 の実戦と分析です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www. .php.cn）！