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 发布文章使用：只允许注册用户才可以访问！

Android 如何设置 WebView 的屏幕占比的更多相关文章

  1. Android中设置半个屏幕大小且居中的button布局 (layout_weight属性)

            先看例如以下布局 : 

  2. Android 调节当前Activity的屏幕亮度

    调节的关键代码: WindowManager.LayoutParams layoutParams = getWindow().getAttributes(); layoutParams.screenB ...

  3. Android 中Webview 自适应屏幕

    随笔 - 478  文章 - 3  评论 - 113 Android 中Webview 自适应屏幕   webview中右下角的缩放按钮能不能去掉 settings.setDisplayZoomCon ...

  4. Android Toast 设置到屏幕中间，自定义Toast的实现方法，及其说明

    http://blog.csdn.net/wangfayinn/article/details/8065763 Android Toast用于在手机屏幕上向用户显示一条信息,一段时间后信息会自动消失. ...

  5. [转载]Android中WebView自适应屏幕

    webview中右下角的缩放按钮能不能去掉 settings.setDisplayZoomControls(false); //隐藏webview缩放按钮 让Webview加载的页面居中显示有我知道的 ...

  6. 在Eclipse Android中设置模拟器屏幕大小

    在Eclipse Android中设置模拟器屏幕大小是本文要介绍的内容,主要是来了解并学习Eclipse Android中模拟器的设置,具体关于Eclipse Android内容的详解来看本文. 方法 ...

  7. android 中webview的屏幕适配问题

    两行代码解决WebView的屏幕适配问题 一个简单的方法,让网页快速适应手机屏幕,代码如下 1 2 WebSettings webSettings= webView.getSettings(); we ...

  8. android中使用WebView请求网页

    请求网页首先需要访问网络的权限,在AndroidManifest.xml添加如下内容: <uses-permission android:name="android.permissio ...

  9. Android学习之 WebView使用小结

    这段时间基于项目须要 在开发中与WebView的接触比較多,前段时间关于HTML5规范尘埃落定的消息出如今各大IT社区头版上,更有人说:HTML5将颠覆原生App开发 尽管我不太认同这一点 可是关于H ...

随机推荐

  1. （Oracle）取当前日期的最近工作日

      描述:现有一需求,日期表中存放了日期和是否节假日(0-工作日,1-节假日),现在需要取日期表中的最近的工作日.如2017/07/23(周日)最近的工作日应该是2017/07/21(周五).     ...

  2. 理解前端模块概念：CommonJs与ES6Module

    前言 现代前端开发每时每刻都和模块打交道.例如,在项目中引入一个插件,或者实现一个供全局使用组件的JS文件.这些都可以称为模块. 在设计程序结构时,不可能把所有代码都放在一起.更为友好的组织方式时按照 ...

  3. 十一：SpringBoot-事务管理

    SpringBoot-事务管理 1.事务管理简介 1.1 特性:ACID 1.2 隔离问题 1.3 隔离级别 2.Spring事务管理 2.1 顶级接口 2.2 事务状态 2.3 事务定义 1.事务管 ...

  4. CSS 文本效果

         对于CSS文本的一些效果,基础一些的知识比较简单,但对于text-indent,vertical-align,text-align等的深入学习能够使我们对HTML5的学习更加轻松,对这部分知 ...

  5. Kali-2020 配置Docker

    Kali 2020 安装Docke 为什么在Kali上安装Docker? Kali有很多工具,但是您想运行一个不包含的工具,最干净的方法是通过Docker容器.例如,我正在研究一个名为vulhub的靶 ...

  6. IPSec 专题----转自华为文档

    参考链接:https://support.huawei.com/enterprise/zh/doc/EDOC1000122878?section=j004 IPSec 特性全景 1.介绍 由于IP报文 ...

  7. Linux常用命令：性能命令

    本文介绍Linux常用性能统计分析命令,监控进程或者系统性能.主要包括CPU(top.mpstat).内存(vmstat.free).I/O(iostat).网络性能(sar).系统日志信息(dems ...

  8. 2019ICPC南昌站

    ICPC比CCPC场面要更大的感觉,这是我的第一印象. 这场比赛教练和我们一起去的,有教练陪着也挺好的,一起吃了吃饭.后来我们吃饭就发现江西这边辣就只是辣,没啥味道,不过拌粉还是可以的.还有江西师范大 ...

  9. python的re模块一些方法 && Tkinter图形界面设计 && 终止python运行函数 && python读写文件 && python一旦给字符串赋值就不能单独改变某个字符，除非重新给变量赋值

    Tkinter图形界面设计见:https://www.cnblogs.com/pywjh/p/9527828.html#radiobutton 终止python运行函数: 采用sys.exit(0)正 ...

  10. Gym 100796K Profact

    Alice is bored out of her mind by her math classes. She craves for something much more exciting. Tha ...