অ্যান্ড্রয়েড ওয়েবভিউ - ওয়েবপেজটি ডিভাইসের স্ক্রিনে ফিট করা উচিত


103

আমি ডিভাইসের স্ক্রিন আকারের উপর ভিত্তি করে ওয়েবপৃষ্ঠায় ফিট করার জন্য নিম্নলিখিতগুলি চেষ্টা করেছি।

mWebview.setInitialScale(30);

এবং তারপরে মেটাডেটা ভিউপোর্ট সেট করুন

<meta name="viewport" content="width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;"/>
<meta name="viewport" content="width=device-width, target-densityDpi=medium-dpi"/>

তবে কিছুই কাজ করে না, ওয়েবপৃষ্ঠাটি ডিভাইসের স্ক্রিন আকারে স্থির নয়।

কেউ কীভাবে আমাকে এটি বলতে পারেন?

উত্তর:


82

30 এ সেট করার পরিবর্তে আপনাকে ম্যানুয়ালি ব্যবহার করতে হবে এমন স্কেলটি আপনাকে গণনা করতে হবে।

private int getScale(){
    Display display = ((WindowManager) getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay(); 
    int width = display.getWidth(); 
    Double val = new Double(width)/new Double(PIC_WIDTH);
    val = val * 100d;
    return val.intValue();
}

তারপরে ব্যবহার করুন

WebView web = new WebView(this);
web.setPadding(0, 0, 0, 0);
web.setInitialScale(getScale());

7
আপনার উত্তরের জন্য ধন্যবাদ, ঠিক আছে, এটি কার্যকর হয়। তবে আমার আলাদা সমস্যা আছে। আমি কোনও চিত্র লোড করছি না, ওয়েবউইজে ওয়েবপৃষ্ঠা লোড করছি, সুতরাং কীভাবে ওয়েবপৃষ্ঠের প্রস্থ (PIC_WIDTH) সন্ধান করা যায়।
এসডাব্লু ডেভেলপার

1
আহ, আমি সেখানে ধ্রুবক মিস করেছি। এর জন্যে দুঃখিত. আপনি কীভাবে প্রকৃত ওয়েবপৃষ্ঠার প্রস্থ পেতে পারেন তা আমি নিশ্চিত নই।
danh32

54
এখানে PIC_WIDTH কী?
পরেশ মায়ানী

4
PIC_WIDTH একটি ধ্রুবক ছিল যা আমি আগে থেকেই জানতাম, যেহেতু আমি সম্পদ ফোল্ডার থেকে কেবল একটি চিত্র প্রদর্শন করছি display আমি উপরে বলেছি, আপনি কীভাবে আসল ওয়েবপৃষ্ঠার প্রস্থ পেতে পারেন তা আমি জানি না।
danh32

1
@ মহেশ্বরলিগ্রেড আমি PIC_WIDTH = 360 ব্যবহার করছি
নিকোলাস এনজি

292

আপনি এটি ব্যবহার করতে পারেন

    WebView browser = (WebView) findViewById(R.id.webview);
    browser.getSettings().setLoadWithOverviewMode(true);
    browser.getSettings().setUseWideViewPort(true);

এই স্ক্রিন আকারের উপর ভিত্তি করে আকার ঠিক করে।


4
এটি স্ক্রিনটি পা দেয় তবে আপনাকে আর জুম ইন / আউট করতে দেয় না। এই ইস্যু কি মৌমাছির উন্নতি করতে পারে ?, আমি জানি এটি আইওএস-এ সম্ভব।
আলেকজান্দ্রো

1
এই সেটিংসটি আমার পক্ষে তবে কেবল প্রস্থের জন্য কাজ করে, একই ক্ষেত্রে এখন এটি উচ্চতা
কেটে দিচ্ছে

1
এটি আমি এখনও পর্যন্ত খুঁজে পেয়েছি এটি অর্জনের সেরা সমাধান।
ফ্রেগন

1
সত্য যে সমাধানটি নির্মিত হয়েছিল তা সত্যই আমাকে জয় করে।
ড্যানিয়েল হ্যান্ডোজো

3
জুম যুক্ত করতে, নিম্নলিখিতগুলি যুক্ত করুন: ওয়েবভিউ.জেটসেটেটিংস ()। সেটবুটইনজুমকন্ট্রোলস (সত্য); webview.getSettings () setDisplayZoomControls (মিথ্যা)।
অ্যান্ড্রু

34

বন্ধু,

আমি আপনার কাছ থেকে প্রচুর আমদানি এবং দুর্দান্ত তথ্য পেয়েছি। তবে, আমার পক্ষে কাজ করার একমাত্র উপায় ছিল:

webView = (WebView) findViewById(R.id.noticiasWebView);
webView.setInitialScale(1);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
webView.setScrollbarFadingEnabled(false);
webView.loadUrl("http://www.resource.com.br/");

সংস্থা থেকে আসা ধরণের ডিভাইসের কারণে আমি অ্যান্ড্রয়েড ২.১ এ কাজ করছি। তবে আমি প্রতিটি থেকে তথ্যের অংশ ব্যবহার করে আমার সমস্যাটি সমাধান করেছি।

তোমাকে ধন্যবাদ!


তাহলে জুমিং আর কাজ করে না। এই সমস্যা নিয়ে আমি কি একা?
পরীক্ষার

@ পরীক্ষা করার পরে আপনি এর কোনও সমাধান পেয়েছেন?
আনশুল তায়াগি

@ আনশুলত্যাগী: না, আমি করিনি। কারণ এটি আমার জন্য একটি পরীক্ষামূলক প্রকল্প ছিল আমি এ বিষয়ে আরও তদন্ত করিনি। আপনি যদি কিছু খুঁজে পান আমাকে জানাবেন!
পরীক্ষার

@ আনশুলটিয়াগি: ওয়েব পৃষ্ঠাগুলির জন্য এই পদ্ধতিটি আমার পক্ষে কাজ করছে। চিত্রগুলির জন্য আমাকে কিছু আলাদা ব্যবহার করতে হবে ...
পরীক্ষা

31

এই সেটিংসটি আমার পক্ষে কাজ করেছে:

wv.setInitialScale(1);
wv.getSettings().setLoadWithOverviewMode(true);
wv.getSettings().setUseWideViewPort(true);
wv.getSettings().setJavaScriptEnabled(true);

আমার প্রচেষ্টায় setInitialScale (1) অনুপস্থিত ছিল।

যদিও ডকুমেন্টেশনস বলে যে সেট ইউসাইডভিউ ভিউপোর্টটি সত্য হিসাবে সেট করা থাকলে 0 সমস্ত দিক থেকে জুম করবে তবে 0 আমার পক্ষে কাজ করে না এবং আমাকে 1 সেট করতে হয়েছিল ।


1
আমি অন্তর্নিহিত স্কেল সেট করতে চাইছিলাম না এবং এটি আমার জন্য বছরের পর বছর ধরে কাজ করে। (আমি কেবল ওভারভিউ মোড এবং ভিউপোর্ট স্থাপন করেছিলাম)। তবে কেবল নতুন নতুন ডিভাইসটি পৃষ্ঠাটি রিফ্রেশ না হওয়া অবধি জুম জুম শুরু হবে বলে মনে হয়েছে। অন্তর্নিহিত স্কেল সেট করা আমার জন্য এটি স্থির করে।
ডুমসকেটনিট

25

এই এইচটিএমএল 5 টিপস ব্যবহার করে দেখুন

http://www.html5rocks.com/en/mobile/mobifying.html

এবং এটির সাথে যদি আপনার অ্যান্ড্রয়েড সংস্করণটি ২.১ বা তার বেশি হয়

  WebView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);

2
দুর্ভাগ্যক্রমে তারা এটিকে
অবমূল্যায়ন

15

আপনার যা করতে হবে তা কেবল সহজ

webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);

13

এগুলি আমার জন্য কাজ করে এবং ওয়েবভিউটির পর্দার প্রস্থে ফিট করে:

// get from xml, with all size set "fill_parent"  
webView = (WebView) findViewById(R.id.webview_in_layout);  
// fit the width of screen
webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN); 
// remove a weird white line on the right size
webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);  

গ্রহনের ওয়েব ভিউতে উপরের পরামর্শগুলি এবং হোয়াইট লাইনকে ধন্যবাদ


3
দেখে মনে হচ্ছে যে সিঙ্গেল_কুলমএন এখন বিকাশকারী.অ্যান্ড্রয়েড
আলেকজান্ডার

11

আমি এই কোডটি ব্যবহার করার সময় আমার একই সমস্যা হয়

webview.setWebViewClient(new WebViewClient() {
}

সুতরাং আপনার কোডটিতে এটি অপসারণ করা উচিত
এবং আপনার ওয়েবভিউয়ের জন্য নীচে 3 টি মোড যুক্ত করতে ভুলবেন না

    webview.getSettings().setJavaScriptEnabled(true);  
    webview.getSettings().setLoadWithOverviewMode(true);
    webview.getSettings().setUseWideViewPort(true);

এই স্ক্রিন আকারের উপর ভিত্তি করে আকার ঠিক করে


2
@ শাহজাইনালি আপনি কি নিজের ওয়েবভিউ জুম করতে পারবেন?
আনশুল তায়াগি

@ আনশুলত্যাগী না এটি জুম করে না।
শাহজাইন আলি

6
WebView browser = (WebView) findViewById(R.id.webview);
browser.getSettings().setLoadWithOverviewMode(true);
browser.getSettings().setUseWideViewPort(true);
browser.getSettings().setMinimumFontSize(40);

এটি আমার পক্ষে দুর্দান্ত কাজ করে যেহেতু .setLoadWithOverViewMode এবং .setUse widesViewPort দ্বারা পাঠ্য আকারটি সত্যিই ছোট সেট করা হয়েছে।


6

আমার এইচটিএমএল স্ট্রিংতে ভিডিও ছিল এবং ওয়েব দেখার প্রস্থ স্ক্রিনের প্রস্থের চেয়ে বড় ছিল এবং এটি আমার পক্ষে কাজ করছে।

এই লাইনে এইচটিএমএল স্ট্রিং যুক্ত করুন।

<head>
<meta name="viewport" content="width=device-width">
</head>

এইচটিএমএল স্ট্রিংয়ে উপরের কোড যুক্ত করার পরে ফলাফল:

<!DOCTYPE html>
<html>

<head>
<meta name="viewport" content="width=device-width">
</head>


</html>

5

এই ক্ষেত্রে আপনাকে আপনার ওয়েবভিউতে এইচটিএমএল ব্যবহার করতে হবে। আমি নিম্নলিখিত কোড ব্যবহার করে এটি সমাধান করেছি

webView.loadDataWithBaseURL(null,
                "<!DOCTYPE html><html><body style = \"text-align:center\"><img src= "
                        + \"http://www.koenvangorp.be/photos/2005_09_16-moon_2000.jpg\"
                        + " alt=\"pageNo\" width=\"100%\"></body></html>",
                "text/html", "UTF-8", null);

আমার অনুমান% এর পরিবর্তে px ot vh ব্যবহার করা ভাল। আইফ্রেমে% এর ওরিয়েন্টেশন পরিবর্তনের উপর কিছু বাগ রয়েছে
সিয়েরেইই

4

ডিসপ্লে.জেটউইথ () এর পর থেকে ড্যানহ 32 দ্বারা উত্তরে পরিবর্তন করা; এখন অবচয় করা হয়েছে।

private int getScale(){
    Point p = new Point();
    Display display = ((WindowManager) getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay(); 
    display.getSize(p);
    int width = p.x; 
    Double val = new Double(width)/new Double(PIC_WIDTH);
    val = val * 100d;
    return val.intValue();
}

তারপরে ব্যবহার করুন

WebView web = new WebView(this);
web.setPadding(0, 0, 0, 0);
web.setInitialScale(getScale());

আমি গণনা করেছি যে স্কেলটি <1 বা 100% হওয়া উচিত তাই আমি অনুপাতটি পেতে আমার প্রস্থটিকে PIC_WIDTH এর সাথে তুলনা করি। এর চেয়েও কিছু প্যাডিং আমি কেটে ফেলেছি।
অভিনব সাক্সেনা

4

এটি একটি এক্সএমএল সমস্যার মতো বলে মনে হচ্ছে। আপনার ওয়েব-ভিউযুক্ত এক্সএমএল ডকুমেন্টটি খুলুন। শীর্ষে প্যাডিং কোডটি মুছুন।

তারপরে বিন্যাসে যুক্ত করুন

android:layout_width="fill_parent"
android:layout_height="fill_parent"

ওয়েব-ভিউতে অ্যাড করুন

android:layout_width="fill_parent"
android:layout_height="fill_parent" 

এটি ওয়েব-ভিউটিকে ডিভাইসের স্ক্রিনে ফিট করে।


এটাই আমার সময় বাঁচায়।
কাবকি

2
ভরা_পিতাটি পুরানো, ম্যাচ প্যারেন্ট ব্যবহার করুন।
ট্রেভর হার্ট

3
webview.setInitialScale(1);
webview.getSettings().setLoadWithOverviewMode(true);
webview.getSettings().setUseWideViewPort(true);
webview.getSettings().setJavaScriptEnabled(true);

কাজ করবে, তবে এর মতো কিছু সরিয়ে ফেলতে ভুলবেন না:

<meta name="viewport" content="user-scalable=no"/>

যদি এইচটিএমএল ফাইলে বিদ্যমান থাকে বা ব্যবহারকারী-স্কেলেবল = হ্যাঁ পরিবর্তন করে তবে তা হয় না।


2
int PIC_WIDTH= webView.getRight()-webView.getLeft();

1
getRight এবং getLeft সর্বদা আমার জন্য 0 প্রদান করে
yrazlik

2

এটি ওয়েবপৃষ্ঠা অনুসারে এমুলেটরটি সামঞ্জস্য করতে সহায়তা করবে:

WebView wb;
//CALL THIS METHOD
wb.setInitialScale(50);

উপরোক্ত হিসাবে আপনি শতাংশে অন্তর্নিহিত স্কেল সেট করতে পারেন।


2

ডিসপ্লে অবজেক্টের getWidth পদ্ধতি অবমূল্যায়ন করা হয়েছে। ওয়েবভিউ উপলব্ধ হয়ে ওঠার আকার পেতে ওপরে ওভারসাইড পরিবর্তন করুন।

WebView webView = new WebView(context) {

    @Override
    protected void onSizeChanged(int w, int h, int ow, int oh) {

        // if width is zero, this method will be called again
        if (w != 0) {

            Double scale = Double.valueOf(w) / Double.valueOf(WEB_PAGE_WIDTH);

            scale *= 100d;

            setInitialScale(scale.intValue());
        }

        super.onSizeChanged(w, h, ow, oh);
    }
};

আপনি কিভাবে পাবেন WEB_PAGE_WIDTH?
পরীক্ষার

আপনি যদি পর্দার সাথে মানানসই কিছু স্থির প্রস্থের বিষয়বস্তু স্কেল করার চেষ্টা করছেন, তবে আপনার সামগ্রীটি কত প্রশস্ত তা আপনার আগে থেকেই জানা উচিত। যে জানার জন্য?
শার্কএলি

ঠিক আছে এটি চিত্রগুলির জন্য কাজ করা উচিত। তবে ওয়েবপৃষ্ঠাগুলির জন্য (যা প্রতিক্রিয়াশীল হতে পারে) এটি কোনও প্রস্থ হতে পারে> উদাহরণস্বরূপ 320px।
পরীক্ষার

1

তত্ত্বের সংমিশ্রণ:

settings.setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS); 

সঙ্গে

settings.setUseWideViewPort(false)

সমস্যাটি সমাধান করে, সামগ্রীটি মোড়ানো এবং স্ক্রিনে ফিটিং। তবে NARROW_COLUMNS হ্রাস করা হয়েছে। আমি আপনাকে নীচে এই থ্রেডটি পড়ার পরামর্শ দিচ্ছি যা সমস্যাটি বিস্তারিতভাবে আবিষ্কার করে: https://code.google.com/p/android/issues/detail?id=62378


1

@ ড্যানহ 32 এর উত্তরের ভিত্তিতে অবচয় পদ্ধতিগুলি ব্যবহার না করে এখানে একটি আপডেট সংস্করণ রয়েছে:

protected int getScale(Double contentWidth) {
    if(this.getActivity() != null) {
        DisplayMetrics displaymetrics = new DisplayMetrics();
        this.getActivity().getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
        Double val = displaymetrics.widthPixels / contentWidth * 100d;
        return val.intValue();
    } else {
        return 100;
    }
}

একইভাবে ব্যবহার করতে:

int initialScale = this.getScale(420d);
this.mWebView.setInitialScale(initialScale);

0

রেফারেন্সের জন্য, এটি @ ড্যানহ 32 এর সমাধানের একটি কোটলিন বাস্তবায়ন:

private fun getWebviewScale (contentWidth : Int) : Int {
    val dm = DisplayMetrics()
    windowManager.defaultDisplay.getRealMetrics(dm)
    val pixWidth = dm.widthPixels;
    return (pixWidth.toFloat()/contentWidth.toFloat() * 100F)
             .toInt()
}

আমার ক্ষেত্রে, প্রস্থটি তিনটি চিত্র দ্বারা নির্ধারিত হয়েছিল যাতে 300 পিক্স হতে পারে:

webview.setInitialScale(getWebviewScale(300))

এই পোস্টটি পেতে আমার কয়েক ঘন্টা সময় লেগেছে। ধন্যবাদ!


-4
WebView webView = (WebView)findViewById(R.id.web_view);
webView.setInitialScale((int) getResources().getDimension(R.dimen._50sdp)); // getActivity(). if you are at Fragment
webView.getSettings().setLoadsImagesAutomatically(true);
webView.getSettings().setJavaScriptEnabled(true);
webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
webView.loadDataWithBaseURL(null,here comes html content,"text/html","UTF-8", null);
webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setSupportZoom(true);
webView.getSettings().setDisplayZoomControls(true);
webView.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);

দয়া করে ঠিক ভোটের কারণে একই বিষয়বস্তু সহ দুটি উত্তর পোস্ট করবেন না।
টেকাইড ডিজাইনার

এবং দয়া করে আপনার কোডটি কিছুটা ব্যয় করে বিন্যাস করুন! আপনি কেন এত ডানদিকে যুক্ত করলেন? কিছু সাদা জায়গা মুছতে খুব বেশি সময় আছে?
ম্যাসিমিলিয়ানো ক্রাউস
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.