精华内容
下载资源
问答
  • 移动端如何让页面强制横屏

    万次阅读 2017-12-21 20:49:14
    2. 即使用户 开了 横屏模式,界面横屏模式 自动转换 过来。实现1.html 结构 这里就 简单 放一个文字,作为测试 的元素 Loading </body>2.meta 标签 这里的 作用是 页面的 宽度 适配 手机屏幕的 宽度,这样写...

    最近想 做一个 手机游戏 页面,所以就 先攻克 手机横屏的 难关。

    需求

    1. 在竖屏 条件 下默认是 横屏显示的。

    2. 即使用户 开了 横屏模式,界面的 横屏模式 自动转换 过来。

    实现

    1.html 结构

    • 这里就 简单 放一个文字,作为测试 的元素
    <body>
        Loading
    </body>

    2.meta 标签

    • 这里的 作用是 让 页面的 宽度 适配 手机屏幕的 宽度,这样写 就能使 html 的 width 等于 对应手机 屏幕的 宽度。另外 还阻止用户 缩放 界面。
    • 目的是 让界面显示 更加适应 手机屏幕。
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    3. css代码

    • 关于横屏的 样式 就主要是 利用 transform 的 旋转 和 平移 来改变 竖屏样式。
    • 对于横屏的 样式 就保持不变
    • 对于 body 在 屏幕转换 时,宽高的 改变,就用 JS 来控制
    * {
      /*初始化样式*/
      margin: 0;
      padding: 0;
    }
    html {
      /*用于 获取 屏幕的可视宽高*/
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    body {
      /*让 body 初始 width 和 height 就 等于 页面可视区域的 宽高*/
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    
      /*用于 测试的 样式*/
      background-color: #444;
      color: #FFF;
      letter-spacing: 4px;
      font-size: 28px;
      /*文字居中*/
      display: flex;
      justify-content: center;
      align-items: center;
    }
    @media screen and (orientation:portrait) {
      /*竖屏样式*/
      body {
        transform-origin: 0 0;
        transform: rotateZ(90deg) translateY(-100%);
      }
    }

    4. JS 代码

    • 通过 html 初始化的 宽高 来确定 body 的宽高
    • 目前为止 就 能够实现 移动端 强制 横屏的 要求了。
    (function () {
      function resize() {
        var body = document.getElementsByTagName('body')[0];
        var html = document.getElementsByTagName('html')[0];
        var width = html.clientWidth;
        var height =  html.clientHeight;
        var max = width > height ? width : height;
        var min = width > height ? height : width;
        body.style.width = max + "px";
        body.style.height = min + "px";
      }
      resize();
      window.addEventListener("resize", resize)
    })();

    另外. 合并后的测试html

    <!DOCTYPE html>
    <html lang="zh">
    <head>
      <meta charset="UTF-8">
      <title>Demo</title>
      <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
      <style type="text/css">
        * {
          /*初始化样式*/
          margin: 0;
          padding: 0;
        }
        html {
          /*用于 获取 屏幕的可视宽高*/
          width: 100%;
          height: 100%;
          overflow: hidden;
        }
        body {
          /*让 body 初始 width 和 height 就 等于 页面可视区域的 宽高*/
          position: fixed;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
    
          /*用于 测试的 样式*/
          background-color: #444;
          color: #FFF;
          letter-spacing: 4px;
          font-size: 28px;
          /*文字居中*/
          display: flex;
          justify-content: center;
          align-items: center;
        }
        @media screen and (orientation:portrait) {
          /*竖屏样式*/
          body {
            transform-origin: 0 0;
            transform: rotateZ(90deg) translateY(-100%);
          }
        }
        /*测试 边边角角*/
        div {
          background-color: #F00;
          position: fixed;
          height: 2px;
          width: 100px;
        }
        div:nth-of-type(1){
          top: 0;
          left: 0;
        }
        div:nth-of-type(2){
          top: 0;
          right: 0;
    
        }
        div:nth-of-type(3){
          bottom: 0;
          left: 0;
        }
        div:nth-of-type(4){
          bottom: 0;
          right: 0;
        }
      </style>
    </head>
    <body>
      Loading2
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <script>
        (function () {
          function resize() {
            var body = document.getElementsByTagName('body')[0];
            var html = document.getElementsByTagName('html')[0];
            var width = html.clientWidth;
            var height =  html.clientHeight;
            var max = width > height ? width : height;
            var min = width > height ? height : width;
            body.style.width = max + "px";
            body.style.height = min + "px";
          }
          resize();
          window.addEventListener("resize", resize)
        })();
      </script>
    </body>
    </html>
    展开全文
  • 在Android中要一个程序的界面始终保持一个方向,不随手机方向转动而变化的办法: 只要在AndroidManifest.xml里面配置一下就可以了。 在AndroidManifest.xml的activity(需要禁止转向的activity)配置中加入 ...

    参考http://bbs.phonegap100.com/thread-399-1-1.html

    方法:

    在Android中要让一个程序的界面始终保持一个方向,不随手机方向转动而变化的办法: 只要在AndroidManifest.xml里面配置一下就可以了。

    在AndroidManifest.xml的activity(需要禁止转向的activity)配置中加入 android:screenOrientation=”landscape”属性即可(landscape是横向,portrait是纵向)。例如:

    <application android:persistent="true"
           android:label="@string/home_title"
           android:icon="@drawable/ic_launcher_home">
      
         <activity android:name="Home"
                 android:theme="@style/Theme"
                 android:launchMode="singleInstance"
                 android:stateNotNeeded="true"
                 android:screenOrientation="portrait">
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />
                 <category android:name="android.intent.category.HOME"/>
                 <category android:name="android.intent.category.DEFAULT" />
             </intent-filter>
         </activity>
    
    <application android:persistent="true"
    android:label="@string/home_title"
    android:icon="@drawable/ic_launcher_home">
    
    <activity android:name="Home"
    android:theme="@style/Theme"
    android:launchMode="singleInstance"
    android:stateNotNeeded="true"
    android:screenOrientation="portrait">
    <intent-filter>
    <action android:name="android.intent.action.MAIN" />
    <category android:name="android.intent.category.HOME"/>
    <category android:name="android.intent.category.DEFAULT" />
    </intent-filter>
    </activity>
    

    另外,android中每次屏幕方向切换时都会重启Activity,所以应该在Activity销毁前保存当前活动的状态,在Activity 再次Create的时候载入配置,那样,进行中的游戏就不会自动重启了!

    要避免在转屏时重启activity,可以通过在androidmanifest.xml文件中重新定义方向(给每个activity加上 android:configChanges=”keyboardHidden|orientation”属性),并根据Activity的重写 onConfigurationChanged(Configuration newConfig)方法来控制,这样在转屏时就不会重启activity了,而是会去调用 onConfigurationChanged(Configuration newConfig)这个钩子方法。例如:

     if(newConfig.orientation==Configuration.ORIENTATION_LANDSCAPE){
       //横向  
       setContentView(R.layout.file_list_landscape);  
     }else{
       //竖向  
        setContentView(R.layout.file_list);  
     }
    
    if(newConfig.orientation==Configuration.ORIENTATION_LANDSCAPE){
    //横向
    setContentView(R.layout.file_list_landscape);
    }else{
    //竖向
    setContentView(R.layout.file_list);
    }


    在模拟器中,要使程序转屏可以使用快捷键F12或Ctrl+F11来切换。当然在用命令行启动模拟器时可以直接使用参数emulator.exe -skin HVGA-L来启动横屏的程序。 


    禁止感应
    在AndroidManifest.xml文件的Activity结点里面添加一个属性 android:screenOrientation="nosensor"


    展开全文
  • 在编写android小应用的时候,碰到了这样的一个问题:当推开手机的实体键盘时,屏幕由竖屏转换为横屏,此时应用程序的显示界面(Activity)就会被销毁了,这个人比较郁闷。 如何才能这个activity不被销毁呢? ...

    背景介绍:

    在编写android小应用的时候,碰到了这样的一个问题:当推开手机的实体键盘时,屏幕由竖屏转换为横屏,此时应用程序的显示界面(Activity)就会被销毁了,这个让人比较郁闷。

    如何才能让这个activity不被销毁呢?

    ------------------------------------- 背景分割线 ---------------------------------------------

    资料查询:

    在android开发网上有这么几段话:

    If the configuration of the device (as defined by the Resources.Configuration class) changes, then anything displaying a user interface will need to update to match that configuration. Because Activity is the primary mechanism for interacting with the user, it includes special support for handling configuration changes.

    Unless you specify otherwise, a configuration change (such as a change in screen orientation, language, input devices, etc) will cause your current activity to bedestroyed, going through the normal activity lifecycle process of onPause()onStop(), and onDestroy() as appropriate. If the activity had been in the foreground or visible to the user, once onDestroy() is called in that instance then a new instance of the activity will be created, with whatever savedInstanceState the previous instance had generated from onSaveInstanceState(Bundle).

    In some special cases, you may want to bypass restarting of your activity based on one or more types of configuration changes. This is done with theandroid:configChanges attribute in its manifest. For any types of configuration changes you say that you handle there, you will receive a call to your current activity'sonConfigurationChanged(Configuration) method instead of being restarted. If a configuration change involves any that you do not handle, however, the activity will still be restarted and onConfigurationChanged(Configuration) will not be called.

    To declare that your Activity handles a configuration change, edit the appropriate <activity> element in your manifest file to include the android:configChanges attribute with a string value that represents the configuration that you want to handle. Possible values are listed in the documentation for the android:configChanges attribute (the most commonly used values are orientation to handle when the screen orientation changes and keyboardHidden to handle when the keyboard availability changes). You can declare multiple configuration values in the attribute by separating them with a pipe character ("|").

    For example, the following manifest snippet declares an Activity that handles both the screen orientation change and keyboard availability change:

    <activity android:name=".MyActivity"
              android:configChanges="orientation|keyboardHidden"
              android:label="@string/app_name">

    Now when one of these configurations change, MyActivity is not restarted. Instead, the Activity receives a call to onConfigurationChanged(). This method is passed aConfiguration object that specifies the new device configuration. By reading fields in the Configuration, you can determine the new configuration and make appropriate changes by updating the resources used in your interface. At the time this method is called, your Activity's Resources object is updated to return resources based on the new configuration, so you can easily reset elements of your UI without the system restarting your Activity.

    ————————————————————————————————————————————————————————————————

    刚接触launcher的人,如果对屏幕横竖切换不是很了解的话,经常会发现launcher的oncreate等一些生命周期的方法会被执行两次。这是因为android默认是坚屏的,如果运行在机顶盒上会切换到横屏来,导致生命周期的重新执行。
     
    首先看下android:configChanges这个属性
     
    “mcc“ 移动国家号码,由三位数字组成,每个国家都有自己独立的MCC,可以识别手机用户所属国家。
    “mnc“ 移动网号,在一个国家或者地区中,用于区分手机用户的服务商。
    “locale“ 所在地区发生变化。
    “touchscreen“ 触摸屏已经改变。
    “keyboard“ 键盘模式发生变化,例如:用户接入外部键盘输入。
    “keyboardHidden“ 用户打开手机硬件键盘
    “navigation“ 导航型发生了变化。
    “orientation“ 设备旋转,横向显示和竖向显示模式切换。
    “fontScale“ 全局字体大小缩放发生改变
     
     "uiMode", 用户的模式发生了变化.
     
     
     
    另外有三点需要注意的:
     
    1、不设置Activity的android:configChanges时,切屏会重新调用各个生命周期,切横屏时会执行一次,切竖屏时会执行两次
     
    2、设置Activity的android:configChanges="orientation"时,切屏还是会重新调用各个生命周期,切横、竖屏时只会执行一次
     
    3、设置Activity的android:configChanges="orientation|keyboardHidden"时,切屏不会重新调用各个生命周期,只会执行onConfigurationChanged方法。但是,自从Android 3.2(API 13),在设置Activity的android:configChanges="orientation|keyboardHidden"后,还是一样会重新调用各个生命周期的。因为screen size也开始跟着设备的横竖切换而改变。所以,在AndroidManifest.xml里设置的MiniSdkVersion和 TargetSdkVersion属性大于等于13的情况下,如果你想阻止程序在运行时重新加载Activity,除了设置"orientation",你还必须设置"ScreenSize"。
     
     再来看看android:screenOrientation属性
     
    "unspecified"
    - 默认值. 由系统选择显示方向. 在不同的设备可能会有所不同.
     
    "landscape"
    - 橫向
     
    "portrait"
    - 纵向
     
    "user"
    - 用戶当前的首选方向
     
    "behind"
    - 与在活动堆栈下的活动相同方向
     
    "sensor"
    - 根据物理方向传感器确定方向. 取决于用戶手持的方向, 当用戶转动设备, 它跟隨改变.
     
    "nosensor"
    - 不经物理方向传感器確定方向. 该传感器被忽略, 所以当用戶转动设备, 显示不會跟隨改变. 除了这个区别,系統选择使用相同的政策取向对于“未指定”设置. 系統根据“未指定”("unspecified")设定选择相同显示方向.
     
    因此解决launcher  oncreate方法执行两次的问题的方法是:
     
    增加属性:android:screenOrientation="landscape"
     
    增加属性:android:configChanges="keyboard|keyboardHidden|orientation|touchsc

    ————————————————————————————————————————————————————————————————

    项目中 MediaPlayerUI 在manifest.xml文件中 直接填上configChanges="keyboard|orientation|riScreenSize"


    展开全文
  • PhoneGAP 如何禁止横屏竖屏旋转

    千次阅读 2012-05-03 11:09:46
    在Android中要一个程序的界面始终保持一个方向,不随手机方向转动而变化的办法: 只要在AndroidManifest.xml里面配置一下就可以了。 在AndroidManifest.xml的activity(需要禁止转向的activity)配置中加入 ...
    在Android中要让一个程序的界面始终保持一个方向,不随手机方向转动而变化的办法: 只要在AndroidManifest.xml里面配置一下就可以了。

    在AndroidManifest.xml的activity(需要禁止转向的activity)配置中加入 android:screenOrientation=”landscape”属性即可(landscape是横向,portrait是纵向)。例如:
    Java 代码

    1. <application android:persistent="true" 
    2.       android:label="@string/home_title" 
    3.       android:icon="@drawable/ic_launcher_home"> 
    4.  
    5.     <activity android:name="Home" 
    6.             android:theme="@style/Theme" 
    7.             android:launchMode="singleInstance" 
    8.             android:stateNotNeeded="true" 
    9.             android:screenOrientation="portrait"> 
    10.         <intent-filter> 
    11.             <action android:name="android.intent.action.MAIN" /> 
    12.             <category android:name="android.intent.category.HOME"/> 
    13.             <category android:name="android.intent.category.DEFAULT" /> 
    14.         </intent-filter> 
    15.     </activity> 

    <application android:persistent="true"
    android:label="@string/home_title"
    android:icon="@drawable/ic_launcher_home">

    <activity android:name="Home"
    android:theme="@style/Theme"
    android:launchMode="singleInstance"
    android:stateNotNeeded="true"
    android:screenOrientation="portrait">
    <intent-filter>
    <action android:name="android.intent.action.MAIN" />
    <category android:name="android.intent.category.HOME"/>
    <category android:name="android.intent.category.DEFAULT" />
    </intent-filter>
    </activity>


    另外,android中每次屏幕方向切换时都会重启Activity,所以应该在Activity销毁前保存当前活动的状态,在Activity 再次Create的时候载入配置,那样,进行中的游戏就不会自动重启了!

    要避免在转屏时重启activity,可以通过在androidmanifest.xml文件中重新定义方向(给每个activity加上 android:configChanges=”keyboardHidden|orientation”属性),并根据Activity的重写 onConfigurationChanged(Configuration newConfig)方法来控制,这样在转屏时就不会重启activity了,而是会去调用 onConfigurationChanged(Configuration newConfig)这个钩子方法。例如:

    Java 代码

    1. if(newConfig.orientation==Configuration.ORIENTATION_LANDSCAPE){ 
    2.   //横向  
    3.   setContentView(R.layout.file_list_landscape);  
    4. }else{ 
    5.   //竖向  
    6.    setContentView(R.layout.file_list);  
    7. } 

    if(newConfig.orientation==Configuration.ORIENTATION_LANDSCAPE){
    //横向
    setContentView(R.layout.file_list_landscape);
    }else{
    //竖向
    setContentView(R.layout.file_list);
    }


    在模拟器中,要使程序转屏可以使用快捷键F12或Ctrl+F11来切换。当然在用命令行启动模拟器时可以直接使用参数emulator.exe -skin HVGA-L来启动横屏的程序。 

    phonegap可以用配置文件,苹果和安卓通用,只有一句话
    <preference name="orientation" value="portrait" />
    参考链接https://build.phonegap.com/docs/config-xml
    展开全文
  • 应用所有界面都是横屏显示的,调用开始蓝牙的代码,开启蓝牙界面是竖屏的,屏幕发生旋转给用户的体验不好,如何让开启蓝牙的界面也是横屏的? 这种问题在华为honor v8手机上没有,魅族S3和oppo R9手机上出现了。 效果如下...
  • android横竖总结

    2012-02-08 23:19:40
    在编写android小应用的时候,碰到了这样的一个问题:当推开手机的实体键盘时,屏幕由竖屏转换为横屏,此时应用程序的显示界面(Activity)就会被销毁了,这个人比较郁闷。 如何才能这个activity不被销毁呢? ...
  • 在编写android小应用的时候,碰到了这样的一个问题:当推开手机的实体键盘时,屏幕由竖屏转换为横屏,此时应用程序的显示界面(Activity)就会被销毁了,这个人比较郁闷。 如何才能这个activity不被销毁呢? ---...
  • 在编写android小应用的时候,碰到了这样的一个问题:当推开手机的实体键盘时,屏幕由竖屏转换为横屏,此时应用程序的显示界面(Activity)就会被销毁了,这个人比较郁闷。 如何才能这个activity不被...
  • 在Android中要一个程序的界面始终保持一个方向,不随手机方向转动而变化的办法: 只要在AndroidManifest.xml里面配置一下就可以了。 在AndroidManifest.xml的activity(需要禁止转向的activity)配置中加入 android:...
  • 有时候我们希望一个程序的界面始终保持在一个方向,不随手机方向旋转而变化:在AndroidManifest.xml的每一个需要禁止转向的Activity配置中加入android:screenOrientation=”landscape”属性。landscape=横向...
  • 2.1.2 Android刘海适配

    2019-04-22 18:40:14
    如果全屏模式,app位适配刘海屏,系统会对界面做特殊处理,竖屏向下移动,横屏向右移动 Google在Android9.0推出了刘海屏适配的方案,Android9.0以后,采用此方案即可。 全屏模式下,如何让界面延伸进刘海 判断手机...
  • Android横竖切换相关

    2012-02-20 10:54:16
    在编写android小应用的时候,碰到了这样的一个问题:当推开手机的实体键盘时,屏幕由竖屏转换为横屏,此时应用程序的显示界面(Activity)就会被销毁了,这个人比较郁闷。 如何才能这个activity不被销毁呢? ...

空空如也

空空如也

1 2 3
收藏数 55
精华内容 22
关键字:

如何让手机界面横屏