Android 응용 프로그램의 WebView에서 픽셀 수를 바꾸지 않고 데스크톱을 향한 사이트를 표시하는 방법~ Pixel Perfect on Smartphone~

개요

  • 반대방향.데스크톱 디자인을 위한 사이트를 확대하거나 축소하지 않고 안드로이드 앱에 있는 웹뷰에 표시하는 방법이다
  • 영어로 말하면 스마트폰에'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>
    

    결과


    스마트폰 캡처를 찍으면 100pxx100px로 잘 나와요!

    좋은 웹페이지 즐겨찾기