概要
- レスポンシブの逆です。デスクトップ向けに設計されたサイトを拡大も縮小もせず、Androidアプリ上に抱えたWebView上に表示する方法です
- 英語でいうとスマホ上に「Pixel Perfect」に表示します
- 当然、PC画面に比べ高解像度なスマホで表示すれば、文字や画像が小さくなります、でも今回は、それがやりたいこととなります。
やり方
Androidアプリ側
ポイントは以下の部分となる
webView.setInitialScale(100);
webView.getSettings().setUseWideViewPort(true);
webView.getSettings().setLoadWithOverviewMode(true);
最小限のコードのみ
MainActivity.java
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
WebView webView = (WebView) findViewById(R.id.webview);
webView.setWebViewClient(new WebViewClient());
webView.setInitialScale(100);//<=これを忘れやすい
WebSettings settings = webView.getSettings();
settings.setUseWideViewPort(true);
settings.setLoadWithOverviewMode(true);
}
}
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"></WebView>
</LinearLayout>
HTML側
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<div id="mybox" style="position:absolute;left:0px;top:0px;width:100px;height:100px;background-color: red">
</div>
</body>
</html>
結果
スマホのスクリーンショットをとると、ちゃんと100pxｘ100px で表示される！
