Android 如何设置 WebView 的屏幕占比
Android 如何设置 WebView 的屏幕占比
由于 Android 适用于具有各种屏幕尺寸和像素密度的设备,因此您在设计网页时应将这些因素纳入考虑范围,以便您的网页始终以合适的尺寸显示。
WebView 支持各种 DOM、CSS 和 元标记功能,可帮助您确保网页内容以适当方式呈现。
viewport
视口是您绘制网页的区域。
尽管视口的总可见区域在缩放到最小时与屏幕尺寸一致,但视口具有其自己的提供给网页的像素尺寸。
例如,虽然设备屏幕的物理宽度可能为 480 像素,但视口的宽度可以为 800 像素。
这样,当视口的缩放比例为 1.0 时,宽度设计为 800 像素的网页便会完全显示在屏幕上。
Android 上的大多数网络浏览器(包括 Chrome)默认将视口设置为较大尺寸(称为“宽视口模式”,宽度约为 980px)。
默认情况下,许多浏览器都会尽可能缩小,以显示完整视口宽度(称为“概览模式”)。
️ 注意:当您的网页在 WebView 中呈现时,默认不会使用宽视口模式(网页以完全缩放形式显示)。您可以使用 setUseWideViewPort() 启用宽视口模式。
- 指定视口属性 (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>
- 使用 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);
}
}
- 使用 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 的屏幕占比的更多相关文章
- Android中设置半个屏幕大小且居中的button布局 (layout_weight属性)
先看例如以下布局 :
- Android 调节当前Activity的屏幕亮度
调节的关键代码: WindowManager.LayoutParams layoutParams = getWindow().getAttributes(); layoutParams.screenB ...
- Android 中Webview 自适应屏幕
随笔 - 478 文章 - 3 评论 - 113 Android 中Webview 自适应屏幕 webview中右下角的缩放按钮能不能去掉 settings.setDisplayZoomCon ...
- Android Toast 设置到屏幕中间,自定义Toast的实现方法,及其说明
http://blog.csdn.net/wangfayinn/article/details/8065763 Android Toast用于在手机屏幕上向用户显示一条信息,一段时间后信息会自动消失. ...
- [转载]Android中WebView自适应屏幕
webview中右下角的缩放按钮能不能去掉 settings.setDisplayZoomControls(false); //隐藏webview缩放按钮 让Webview加载的页面居中显示有我知道的 ...
- 在Eclipse Android中设置模拟器屏幕大小
在Eclipse Android中设置模拟器屏幕大小是本文要介绍的内容,主要是来了解并学习Eclipse Android中模拟器的设置,具体关于Eclipse Android内容的详解来看本文. 方法 ...
- android 中webview的屏幕适配问题
两行代码解决WebView的屏幕适配问题 一个简单的方法,让网页快速适应手机屏幕,代码如下 1 2 WebSettings webSettings= webView.getSettings(); we ...
- android中使用WebView请求网页
请求网页首先需要访问网络的权限,在AndroidManifest.xml添加如下内容: <uses-permission android:name="android.permissio ...
- Android学习之 WebView使用小结
这段时间基于项目须要 在开发中与WebView的接触比較多,前段时间关于HTML5规范尘埃落定的消息出如今各大IT社区头版上,更有人说:HTML5将颠覆原生App开发 尽管我不太认同这一点 可是关于H ...
随机推荐
- 网络编程-I/O复用
I/O模型 Unix下可用的I/O模型有五种: 阻塞式I/O 非阻塞式I/O I/O复用(select和poll.epoll) 信号驱动式I/O(SIGIO) 异步I/O(POSIX的aio_系列函数 ...
- Linux 技巧:让进程在后台运行更可靠的几种方法
Linux 技巧:让进程在后台运行更可靠的几种方法 https://www.ibm.com/developerworks/cn/linux/l-cn-nohup/index.html 我们经常会碰到这 ...
- 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 有个名词在现有的回答下面都没 ...
- 3.DHCP原理
1.DHCP服务器给首次接入网络的客户端分配网络参数的工作原理 只有跟DHCP客户端在同一个网段的DHCP服务器才能收到DHCP客户端广播的DHCP DISCOVER报文.当DHCP客户端与DHCP服 ...
- ACM-古老的密码(排序qsort)
古老的密码 题目描述:给定两个长度一样且不超过100的字符串,判断是否能把其中一个字符串的各个字母重排,之后对26个字母做一个一一映射,使得两个字符串相同例如,JWPUDJSTVP重排后可以得到WJD ...
- Java JDBC 模糊查询 避免输入_,%返回全部数据
Java JDBC 模糊查询 避免输入_,%返回全部数据 "SELECT * FROM employees WHERE INSTR(first_name,?)>0 " 仅供参 ...
- shell脚本的使用该熟练起来了,你说呢?(篇三)
继续前一篇的文章: shell脚本的使用该熟练起来了,你说呢?(篇一) shell脚本的使用该熟练起来了,你说呢?(篇二) 文章里面测试的命令脚本文件,大家关注我公众号后,可以私信我领取文件. 作者: ...
- FunnyXEN
For any positive integer n, we define function F(n) and XEN(n).For a collection S(n)={1,2,...,2n}, w ...
- AcWing 250 磁力快(分块)
题目传送门 在一片广袤无垠的原野上,散落着N块磁石. 每个磁石的性质可以用一个五元组(x,y,m,p,r)描述,其中x,y表示其坐标,m是磁石的质量,p是磁力,r是吸引半径. 若磁石A与磁石B的距离不 ...
- 最大子阵 DP or 前缀和orb暴力 能过
在一个给定的n*m二维矩阵中求一个子矩阵元素和的最大值. 思路: 1:一个二维矩阵由两个点可以确定,枚举两个点,取子矩阵最大值. 2:在一维矩阵中,求一个序列的最大子段,利用 f[i]=max(f[i ...