Webview仅在新设备​​上全屏显示,但在旧设备上不显示

时间:2014-08-12 09:04:29

标签: android html css webview fullscreen

我不明白为什么,如果我尝试使用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;
}

1 个答案:

答案 0 :(得分:0)

拿出来:

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

并没有使用css文件,现在它的工作原理。但如果有人知道如何使这项工作,使用css文件会很棒。