如何配置capacitor 打包的安卓app固定竖屏展示?

找到android/app/src/main/AndroidManifest.xml文件,文件大致内容如下:

XML 复制代码
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="包ID">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme"
        android:usesCleartextTraffic="true"
        >


        <activity
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode"
            android:name=".MainActivity"
            android:label="@string/title_activity_main"
            android:theme="@style/AppTheme.NoActionBarLaunch"
            android:launchMode="singleTask"
            android:exported="true"
            >

            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>

        </activity>

        <provider
            android:name="androidx.core.content.FileProvider"
            android:authorities="${applicationId}.fileprovider"
            android:exported="false"
            android:grantUriPermissions="true">
            <meta-data
                android:name="android.support.FILE_PROVIDER_PATHS"
                android:resource="@xml/file_paths"></meta-data>
        </provider>
    </application>

    <!-- Permissions -->

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.POST_NOTIFICATIONS"/>
</manifest>

找到activity,加上这一句android:screenOrientation="portrait"

保存,重新打包安装到真机上测试,即使开启屏幕旋转,app内的页面也只会竖屏展示,不会因为旋转屏幕导致页面乱七八糟了。全部代码如下:

XML 复制代码
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="包ID">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme"
        android:usesCleartextTraffic="true"
        >


        <activity
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode"
            android:name=".MainActivity"
            android:label="@string/title_activity_main"
            android:theme="@style/AppTheme.NoActionBarLaunch"
            android:launchMode="singleTask"
            android:exported="true"
            android:screenOrientation="portrait"
            >

            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>

        </activity>

        <provider
            android:name="androidx.core.content.FileProvider"
            android:authorities="${applicationId}.fileprovider"
            android:exported="false"
            android:grantUriPermissions="true">
            <meta-data
                android:name="android.support.FILE_PROVIDER_PATHS"
                android:resource="@xml/file_paths"></meta-data>
        </provider>
    </application>

    <!-- Permissions -->

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.POST_NOTIFICATIONS"/>
</manifest>

Android 通过 android:screenOrientation 属性定义单个 Activity 的屏幕方向,针对 "仅竖屏" 场景,该属性的取值为 portrait(表示 "强制固定为竖屏",无论设备如何旋转,页面都不会横屏)。

该属性需要添加到你配置中 .MainActivity 对应的 <activity> 节点 里(因为你的应用只有一个主 Activity,控制它即可全局生效;若有多个 Activity,每个都需加此配置)。

效果图:

以上是自己做项目时遇到的问题及解决方法,希望对遇到同样问题的小伙伴有所帮助。

相关推荐
H@Z*rTE|i3 分钟前
elementUi 当有弹窗的时候提示语被覆盖的问题
前端·javascript·elementui
阿奇__4 分钟前
vue2+elementUI table多个字段排序
前端·javascript·elementui
火柴就是我29 分钟前
学习一些常用的混合模式之BlendMode. dstIn
android·flutter
hellokatewj39 分钟前
React Hooks 全解:原理、API 与应用场景
前端·javascript·react.js
袋鱼不重1 小时前
保姆级教程:让 Cursor 编辑器突破地区限制,正常调用大模型(附配置 + 截图)
前端·后端·cursor
bieao1 小时前
Vite+Antd+Micro-app中iframe模式下样式闪烁的问题
前端
zhouzhouya1 小时前
码上星辰,人间烟火:我的2025
前端·程序员·代码规范
彭涛3611 小时前
什么是MessageChannel
前端
嘉琪0011 小时前
provide 和 inject的理解?
前端·javascript·vue.js
匆叔1 小时前
ESLint,前端项目CTRL+S,自动保存格式化文档,超细
前端