xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

Android 如何设置 WebView 的屏幕占比

Android 如何设置 WebView 的屏幕占比

由于 Android 适用于具有各种屏幕尺寸和像素密度的设备，因此您在设计网页时应将这些因素纳入考虑范围，以便您的网页始终以合适的尺寸显示。
WebView 支持各种 DOM、CSS 和 元标记功能，可帮助您确保网页内容以适当方式呈现。

viewport

视口是您绘制网页的区域。
尽管视口的总可见区域在缩放到最小时与屏幕尺寸一致，但视口具有其自己的提供给网页的像素尺寸。

例如，虽然设备屏幕的物理宽度可能为 480 像素，但视口的宽度可以为 800 像素。
这样，当视口的缩放比例为 1.0 时，宽度设计为 800 像素的网页便会完全显示在屏幕上。

Android 上的大多数网络浏览器（包括 Chrome）默认将视口设置为较大尺寸（称为“宽视口模式”，宽度约为 980px）。
默认情况下，许多浏览器都会尽可能缩小，以显示完整视口宽度（称为“概览模式”）。

⚠️ 注意：当您的网页在 WebView 中呈现时，默认不会使用宽视口模式（网页以完全缩放形式显示）。您可以使用 setUseWideViewPort() 启用宽视口模式。

  1. 指定视口属性 (meta 元标记)
<meta
  name="viewport"
  content="
    height = [pixel_value | "device-height"] ,
    width = [pixel_value | "device-width"] ,
    initial-scale = float_value ,
    minimum-scale = float_value ,
    maximum-scale = float_value ,
    user-scalable = ["yes" | "no"]
  "/>

以下 标记指定了视口宽度应与设备屏幕宽度完全一致，并且应停用缩放功能

<head>
  <title>viewport example</title>
  <meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
  1. 使用 CSS 确定设备密度目标
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" />


#header {
  background: url(medium-density-image.png);
}

@media screen and (-webkit-device-pixel-ratio: 1.5) {
  /* CSS for high-density screens */
  #header {
    background: url(high-density-image.png);
  }
}

@media screen and (-webkit-device-pixel-ratio: 0.75) {
  /* CSS for low-density screens */
  #header {
    background: url(low-density-image.png);
  }
}
  1. 使用 JavaScript 确定设备密度目标
const log = console.log;

if (window.devicePixelRatio == 1.5) {
  log("This is a high-density screen");
} else if (window.devicePixelRatio == 0.75) {
  log("This is a low-density screen");
}

https://developer.android.com/guide/webapps/targeting?hl=zh-cn

WebView 自适应全屏布局

如何设置 webview 的初始缩放/宽度

browser_layout.xml


<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"> 

    <WebView android:id="@+id/webview" 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" /> 
</LinearLayout> 

Browser.java

```java
import android.app.Activity; 
import android.os.Bundle; 
import android.webkit.WebView; 

public class Browser extends Activity { 

    /** Called when the activity is first created. */ 
    @Override 
    public void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     // 设置自定义布局
     setContentView(R.layout.browser_layout); 

     String loadUrl = "http://www.google.com/webhp?hl=en&output=html"; 

     // initialize the browser object 
     WebView browser = (WebView) findViewById(R.id.webview); 

     browser.getSettings().setLoadWithOverviewMode(true); 
     browser.getSettings().setUseWideViewPort(true); 

     try { 
      // load the url 
      browser.loadUrl(loadUrl); 
     } catch (Exception e) { 
      e.printStackTrace(); 
     } 
    } 
}

https://stackoverflow.com/questions/3808532/how-to-set-the-initial-zoom-width-for-a-webview

https://stackoverrun.com/cn/q/879437

refs

https://www.jianshu.com/p/0eb85fc7acc2

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

posted @ 2020-10-23 13:23  xgqfrms  阅读(761)  评论(2)  编辑  收藏  举报