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로 잘 나와요!

Reference

이 문제에 관하여(Android 응용 프로그램의 WebView에서 픽셀 수를 바꾸지 않고 데스크톱을 향한 사이트를 표시하는 방법~ Pixel Perfect on Smartphone~), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/riversun/items/575cdb8f42799a964d0f

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다