Android WebView如何在横屏设备中显示Outlook邮件竖屏布局？

我开发了一款Android WebView应用，用于加载outlook.com。目前在竖屏和横屏混合的设备上，发现Outlook的显示布局存在差异：

• 图1（竖屏设备效果）：
• 图2（横屏设备效果）：

希望让横屏设备也显示图1中的竖屏布局，此前尝试设置User Agent未解决问题，求可行实现方法。

1. 强制WebView固定视口宽度 #

Outlook移动端页面会根据视口宽度切换布局，横屏时设备宽度变大就会触发平板/桌面版布局。可以通过注入JS强制锁定视口宽度为竖屏典型值（比如375px，可根据你的竖屏设备实际宽度调整）：

webView.getSettings().setUseWideViewPort(false);
webView.getSettings().setLoadWithOverviewMode(false);

webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        // 注入JS修改视口参数
        view.loadUrl("javascript:(function() { " +
                "var meta = document.querySelector('meta[name=viewport]'); " +
                "meta.setAttribute('content', 'width=375, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'); " +
                "})()");
    }
});

如果页面动态修改视口，可在WebChromeClient的onProgressChanged中重复触发这段JS。

2. 模拟竖屏屏幕参数 #

通过修改WebView的DisplayMetrics，让页面识别当前设备为竖屏状态：

DisplayMetrics metrics = webView.getResources().getDisplayMetrics();
// 将宽度设置为设备竖屏时的最小宽度（基于dp转换）
metrics.widthPixels = getResources().getConfiguration().smallestScreenWidthDp * metrics.density;
// 应用修改后的参数
webView.getResources().updateConfiguration(webView.getResources().getConfiguration(), metrics);

注意要在设备旋转时重新执行这段代码，避免影响其他页面。

3. 覆盖页面媒体查询规则 #

用Chrome DevTools连接WebView，找到Outlook切换布局的CSS媒体查询阈值（比如@media (min-width: 768px)），然后注入自定义CSS强制使用竖屏布局：

webView.loadUrl("javascript:(function() { " +
        "var style = document.createElement('style'); " +
        "style.innerHTML = '@media (min-width: 768px) { body { width: 375px !important; margin: 0 auto; } }'; " +
        "document.head.appendChild(style); " +
        "})()");

4. 强制Activity竖屏显示 #

如果应用允许固定竖屏，可在AndroidManifest.xml中给对应Activity添加配置：

<activity
    android:name=".YourWebViewActivity"
    android:screenOrientation="portrait">
</activity>

这种方法最简单，但会让整个Activity锁定竖屏，适合仅需竖屏展示Outlook的场景。

内容的提问来源于stack exchange，提问作者Rajendra Prasad