`
CshBBrain
  • 浏览: 647257 次
  • 性别: Icon_minigender_1
  • 来自: 成都
博客专栏
B7d9bf34-126e-301f-819e-81f2615b5a2a
开源WebSocket服务...
浏览量:144079
Group-logo
HTML5移动开发
浏览量:137359
社区版块
存档分类
最新评论

Android教程:Webview自适应屏幕

阅读更多
转自:http://www.3gkfz.com/androidjc/1135.html

    第一种:
    settings.setUseWideViewPort(true);
    settings.setLoadWithOverviewMode(true);
    第二种:
    WebSetting settings = webView.getSettings();
    settings.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
    把所有内容放在webview等宽的一列中。(可能会出现页面中链接失效)
    第三种:
    DisplayMetrics metrics = new DisplayMetrics();
    getWindowManager().getDefaultDisplay().getMetrics(metrics);
    int mDensity = metrics.densityDpi;
    if (mDensity == 120) {
    settings.setDefaultZoom(ZoomDensity.CLOSE);
    }else if (mDensity == 160) {
    settings.setDefaultZoom(ZoomDensity.MEDIUM);
    }else if (mDensity == 240) {
    settings.setDefaultZoom(ZoomDensity.FAR);
    }
   这方法可以让你的页面适应手机屏幕的分辨率,完整的显示在屏幕上,可以放大缩小。


例如适合800px宽度的页面,如果通过WebView在1024px的屏幕宽度下显示时,内容(图片)会被放大,整体页面会超出屏幕。
试了将WebView的settings中的缩放都关闭了也不行。
后来发现了WebSettings.ZoomDensity这个设置,并在文档中找到了以下说明:
Enum for specifying the WebView's desired density. FAR makes 100% looking like in 240dpi MEDIUM makes 100% looking like in 160dpi CLOSE makes 100% looking like in 120dpi


这样就能很好的说明以上问题的原因了,又是密度惹的祸...


默认WebView的ZoomDensity是MEDIUM,对应160dpi。而我之前800px宽度的屏幕对应的是60dpi,1024px宽度的屏幕对应的是240dpi。所以,页面在高分辨率的屏幕上被放大了1.5倍。这个和图片自缩放的机制是一样的。


于是,只要通过当前屏幕的密度,动态设置该属性就能适应不同屏幕(当然,默认你的页面是针对160dpi的密度大小设计的),即可解决:
int screenDensity = getResources().getDisplayMetrics().densityDpi ;  
WebSettings.ZoomDensity zoomDensity = WebSettings.ZoomDensity.MEDIUM ;  
switch (screenDensity){  
case DisplayMetrics.DENSITY_LOW : 
    zoomDensity = WebSettings.ZoomDensity.CLOSE; 
    break; 
case DisplayMetrics.DENSITY_MEDIUM: 
    zoomDensity = WebSettings.ZoomDensity.MEDIUM; 
    break; 
case DisplayMetrics.DENSITY_HIGH: 
    zoomDensity = WebSettings.ZoomDensity.FAR; 
    break ; 

webSettings.setDefaultZoom(zoomDensity); 
分享到:
评论

相关推荐

    webview自适应屏幕

    本篇文章将深入探讨如何处理"webview自适应屏幕",特别是针对图片和表格过大导致超出屏幕的情况。 首先,我们需要理解WebView的工作原理。WebView是Android和iOS等平台中的一个组件,它可以加载HTML、CSS和...

    Android编程实现WebView自适应全屏方法小结

    总之,Android编程实现WebView自适应全屏涉及到了多个方面,包括WebSettings的配置、布局算法的选择以及针对不同设备密度的适配。开发者需要灵活运用这些技术,以便在各种设备上提供优秀的用户体验。希望本文的介绍...

    解决Android4.4 webview 图片如何自适应 之前的方法失效问题

    Android4.4之后 webview内核换了 无法自适应大小了 一般的想法就是写js 再调用,这个办法可行,但是却是相当的麻烦。 而动态的改变内容的宽,把html 图片的宽设置成 100% ,也可以做到图片适应屏幕的要求,而且操作...

    android java 通用开发 自适应密度 webview

    8. **自适应密度**:在Android开发中,为了确保应用在不同屏幕分辨率和像素密度的设备上都有良好的显示效果,需要实现自适应密度的策略。这包括使用dp和sp单位代替px,以及适配不同的屏幕尺寸和比例。 9. **WebView...

    android webview 选择文件(拍照,本地相册) 百度定位自适应屏幕

    3. 自适应屏幕:使用百度地图SDK提供的`MapView`,可以自动适应不同设备的屏幕尺寸。在布局文件中添加`MapView`,并初始化: ```xml android:id="@+id/bmapView" android:layout_width="match_parent" android:...

    安卓WebView开发自适应

    总的来说,安卓WebView开发自适应是一个涉及多方面技术的问题,包括WebView的使用、HTML/CSS的响应式设计、Android布局的自适应、原生与Web的交互等。通过熟练掌握这些知识点,开发者可以构建出既美观又具有良好用户...

    Android-android端通用WebView

    - 其他设置:如设置自适应屏幕大小(`setUseWideViewPort()`,`setLoadWithOverviewMode()`),启用缩放(`setBuiltInZoomControls()`),禁用缩放(`setSupportZoom()`)等。 3. **JavaScript交互**: - 使用 `...

    Android之WebView使用Demo

    - 支持其他Web特性:如设置默认字体大小、自适应屏幕等,通过`WebSettings`的各种方法进行配置。 3. **交互与控制** - 加载进度:使用`WebViewClient`的`onPageStarted()`和`onPageFinished()`监听网页加载的开始...

    Android 通过 WebView 与js 简单交互实现图文混排与查看大图功能

    例如,使用百分比宽度可以让图片自适应屏幕宽度。 - 为解决图片适配问题,可以使用响应式设计,如Bootstrap框架,或者在JavaScript中动态计算图片大小。 5. **查看大图功能** - 当用户点击图片时,可以弹出一个新...

    Android中使用WebView显示网页

    可以通过设置自适应屏幕大小、预加载策略、减少图片质量等方式优化WebView的性能。例如: ```java webSettings.setUseWideViewPort(true); webSettings.setLoadWithOverviewMode(true); webSettings....

    Android项目源码webView套用html页面实现家具销售商城

    - `WebView.getSettings()`用于获取WebView的设置对象,可以设置JavaScript支持、缩放功能、自适应屏幕等。 2. **HTML页面与CSS/JavaScript**: - HTML页面负责展示家具商品的详细信息、布局和交互元素,如图片、...

    Android打开H5网页完整AndroidStudio工程

    例如,开启JavaScript执行(`setJavaScriptEnabled(true)`),设置自适应屏幕大小(`setUseWideViewPort(true)`,`setLoadWithOverviewMode(true)`),以及调整渲染级别(`setRenderPriority(RenderPriority.HIGH)`...

    android_中webView控件详解

    - **自适应屏幕宽度**:使用`setUseWideViewPort`和`setLoadWithOverviewMode`可以使WebView中的内容自适应屏幕宽度。 - **启用localStorage**:使用`setDomStorageEnabled`方法来启用localStorage功能。 - **应用级...

    Android原生WebView与网页js相互调用

    // 自适应屏幕宽度 webView.getSettings().setLoadWithOverviewMode(true); // 自适应屏幕高度 webView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); // 使用缓存 webView.setLayerType(View...

    viewport与android的webview

    正确设置`viewport`可以帮助页面自适应不同分辨率和屏幕尺寸的设备,提高用户体验。 **二、Android Webview** `Android Webview` 是Android SDK提供的一种组件,它基于Chromium内核,可以在Android应用内部加载和...

    android webView.pptx

    5. **设置缩放及自适应屏幕** 为了让WebView中的内容更好地适应屏幕大小,可以设置相应的缩放选项: ```java WebSettings settings = wView.getSettings(); settings.setUseWideViewPort(true); settings....

    webview网站全屏显示

    3. **网页自适应屏幕**: - 使用`WebSettings`对象配置WebView的行为,比如调整缩放级别、启用JavaScript等。 - 要让网页自动适应屏幕大小,可以设置`setUseWideViewPort(true)`和`setLoadWithOverviewMode(true)`...

    Android webView

    5. **Web设置**:根据需求调整其他WebSettings,如字体大小、图片加载策略、自适应屏幕等。例如,`webview.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);`使网页适应单列布局。 ...

    android webview的使用

    // 自适应屏幕宽度 webView.getSettings().setLoadWithOverviewMode(true); // 保持页面比例 webView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); // 使用缓存或网络 ``` 三、与JavaScript...

Global site tag (gtag.js) - Google Analytics