概要

レスポンシブの逆です。デスクトップ向けに設計されたサイトを拡大も縮小もせず、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 で表示される！