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. 网络编程-I/O复用

    I/O模型 Unix下可用的I/O模型有五种: 阻塞式I/O 非阻塞式I/O I/O复用(select和poll.epoll) 信号驱动式I/O(SIGIO) 异步I/O(POSIX的aio_系列函数 ...

  2. Linux 技巧:让进程在后台运行更可靠的几种方法

    Linux 技巧:让进程在后台运行更可靠的几种方法 https://www.ibm.com/developerworks/cn/linux/l-cn-nohup/index.html 我们经常会碰到这 ...

  3. PyPy CPython C++ connects programs written in C and C++ with a variety of high-level programming languages

    PyPy 为什么会比 CPython 还要快? - 知乎 https://www.zhihu.com/question/19588346/answer/131977984 有个名词在现有的回答下面都没 ...

  4. 3.DHCP原理

    1.DHCP服务器给首次接入网络的客户端分配网络参数的工作原理 只有跟DHCP客户端在同一个网段的DHCP服务器才能收到DHCP客户端广播的DHCP DISCOVER报文.当DHCP客户端与DHCP服 ...

  5. ACM-古老的密码(排序qsort)

    古老的密码 题目描述:给定两个长度一样且不超过100的字符串,判断是否能把其中一个字符串的各个字母重排,之后对26个字母做一个一一映射,使得两个字符串相同例如,JWPUDJSTVP重排后可以得到WJD ...

  6. Java JDBC 模糊查询 避免输入_,%返回全部数据

    Java JDBC 模糊查询 避免输入_,%返回全部数据 "SELECT * FROM employees WHERE INSTR(first_name,?)>0 " 仅供参 ...

  7. shell脚本的使用该熟练起来了,你说呢?(篇三)

    继续前一篇的文章: shell脚本的使用该熟练起来了,你说呢?(篇一) shell脚本的使用该熟练起来了,你说呢?(篇二) 文章里面测试的命令脚本文件,大家关注我公众号后,可以私信我领取文件. 作者: ...

  8. FunnyXEN

    For any positive integer n, we define function F(n) and XEN(n).For a collection S(n)={1,2,...,2n}, w ...

  9. AcWing 250 磁力快(分块)

    题目传送门 在一片广袤无垠的原野上,散落着N块磁石. 每个磁石的性质可以用一个五元组(x,y,m,p,r)描述,其中x,y表示其坐标,m是磁石的质量,p是磁力,r是吸引半径. 若磁石A与磁石B的距离不 ...

  10. 最大子阵 DP or 前缀和orb暴力 能过

    在一个给定的n*m二维矩阵中求一个子矩阵元素和的最大值. 思路: 1:一个二维矩阵由两个点可以确定,枚举两个点,取子矩阵最大值. 2:在一维矩阵中,求一个序列的最大子段,利用 f[i]=max(f[i ...