Webview 仅在新设备上全屏显示，但在旧设备上不显示答案

【问题标题】：Webview is full screen only on new devices, but not on older onesWebview 仅在新设备上全屏显示，但在旧设备上不显示
【发布时间】：2014-08-12 09:04:28
【问题描述】：

我不明白为什么，如果我在 Nexus5 上试用，一切都很好，但如果我在 4.2.2 LG P880 或 4.1.2 三星 S2 等旧手机上试用，webview 的内容将不会全屏显示.知道我做错了什么吗？这是我的代码：

@InjectView(R.id.webview) WebView mWebView;
@InjectView(R.id.title_textview)
TextView title;

@Override
protected void onCreate(Bundle savedInstanceState){
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_webview);
    ButterKnife.inject(this);
    Bundle bundle = getIntent().getExtras();

    if(bundle != null){
        String file = "file:///android_asset/webview/";

        if(bundle.getInt("type") == TYPE_TERMS) {
            title.setText(getString(R.string.terns2));
            file += "terms.html";
        }else if(bundle.getInt("type") == TYPE_PRIVACY) {
            title.setText(getString(R.string.privacy_policy2));
            file += "privacy.html";
        }else if(bundle.getInt("type") == TYPE_ATTRIBUTIONS) {
            title.setText(getString(R.string.attributions2));
            file += "attributions.html";
        }else{
            findViewById(R.id.id_bar).setVisibility(View.GONE);
            file = "https://www.facebook.com/PassengerApp";
        }

        mWebView.setInitialScale(1);
        mWebView.getSettings().setLoadWithOverviewMode(true);
        mWebView.getSettings().setUseWideViewPort(true);
        mWebView.setWebChromeClient(new WebChromeClient());
        mWebView.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url){
                return false;
            }
        });

        mWebView.loadUrl(file);
    }
}

@Override
public void onBackPressed() {
    super.onBackPressed();
    overridePendingTransition(R.anim.push_right_in, R.anim.push_right_out);
}

XML：

   <WebView
    android:id="@+id/webview"
    android:layout_marginLeft="12dp"
    android:layout_marginRight="12dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

图片： NExus 5：http://tinypic.com/view.php?pic=3321m3b&s=8#.U-nYJICSzKg

LG P880：http://tinypic.com/view.php?pic=nf600i&s=8#.U-nYbICSzKg

PS：如果我加载一个真实的网页，它会正确加载。

这是我使用的 .css：

*{
margin:0;
padding:0;
}

body{
background-color: #f7f7f7;
width:100%;
color: #424446;
font-size: 46px;
line-height: 1.5em;
}

.bg{
background-color: #f7f7f7;
}

.full{
margin: 10px 20px 20px 10px;
position: relative;
width: 100%;
z-index: 2;
}

h1{
color: #424446;
font-size: 80px;
line-height: 1.5em;
text-align: center;
margin: 40px 0;
}

h1.first{
margin: -50px 0 5px 0;
}

h2,h3{
color: #424446;
font-size: 70px;
line-height: 1.5em;
padding: 35px 0 20px;
margin-top: 80px;
margin-bottom: 40px;
}

ol{
padding-left: 1.7em;
}

ul {
margin-top: 100px;
margin-bottom: 100px;
}

ul li{
margin-top: 20px;
padding-left: 25px;
}

.full.front{
background: url("images/logo.png") no-repeat scroll center top transparent;
font-size: 48px;
line-height: 35px;
margin: 100px auto;
padding: 400px 100px 100px;
text-align: center;
width: 440px;
height: 410px;
}

.terms-link{
font-size: 26px;
}

.download-wrapper a{
background: url("images/button.png") no-repeat scroll 0 0 transparent;
color: white;
display: block;
font-size: 45px;
font-weight: bold;
height: 105px;
line-height: 89px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 402px;
margin: 50px auto;
}

.download-wrapper a:active{
background: url("images/button-pressed.png") no-repeat scroll 0 0 transparent;
}    

.download-wrapper{
margin: 30px 0 40px;
}

a{
color: #1C5188;
}

【问题讨论】：

我不是 100% 确定，但我在为我的主页进行抽奖活动时遇到了一个安静的类似问题。我发现，较旧的手机/设备在设置“100%”时出现问题，这就是为什么它们不以全尺寸显示的原因。我做了一个媒体查询来检查什么样的设备试图显示我的抽奖网站，并简单地给它一个固定的大小。它不是解决这个问题的最佳方法。但它对我有用

标签： android html css webview fullscreen

【解决方案1】：

拿出这个：

 mWebView.setInitialScale(1);
 mWebView.getSettings().setLoadWithOverviewMode(true);
 mWebView.getSettings().setUseWideViewPort(true);

并且不使用 css 文件，现在它可以工作了。但是，如果有人知道如何使用 css 文件来完成这项工作，那就太好了。

【讨论】：