zoukankan      html  css  js  c++  java
  • 屏幕旋转问题小结

    一、竖屏转横屏问题

    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">
    <!-- 适应移动端end -->

    二、监听屏幕旋转

    4. 屏幕旋转事件:onorientationchange

    添加屏幕旋转事件侦听,可随时发现屏幕旋转状态(左旋、右旋还是没旋)。例子:

    // 判断屏幕是否旋转

    function orientationChange() {

        switch(window.orientation) {

          case 0: 

                alert("肖像模式 0,screen- " + screen.width + "; screen-height:" + screen.height);

                break;

          case -90: 

                alert("左旋 -90,screen- " + screen.width + "; screen-height:" + screen.height);

                break;

          case 90:   

                alert("右旋 90,screen- " + screen.width + "; screen-height:" + screen.height);

                break;

          case 180:   

              alert("风景模式 180,screen- " + screen.width + "; screen-height:" + screen.height);

              break;

        };<br>};

    // 添加事件监听

    addEventListener('load', function(){

        orientationChange();

        window.onorientationchange = orientationChange;

    });

  • 相关阅读:
    23 数字时钟&长图滚动
    22 日期特效&长图滚动
    彻底澄清c/c++指针概念
    已管理员模式运行批处理路径丢失问题的解决方法
    使用mathjax在博客中完美显示数学公式,支持PC,手机浏览器
    GOOGLE高级搜索技巧
    我要搬家
    简单的3proxy配置
    AutoMapper小结
    专业IT培训机构-传智播客
  • 原文地址:https://www.cnblogs.com/dingyufenglian/p/4844532.html
Copyright © 2011-2022 走看看