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 ...
随机推荐
- Ubuntu14.04系统安装
1. 使用U盘或光盘进行引导进入系统安装向导. 2. 安装类型选择,选择中文(简体).然后点安装ubuntu. 3. 安装ubuntu电脑必须接入外网(外网的方式有自动获取或手动编辑IP地址). 网络 ...
- Slack 的想法很好啊,很有创新,牛。
[原]https://www.leiphone.com/news/201411/aXHUpe4ZFI2sSwpb.html 由于以往一些用于办公的应用反响平平,因此对迅速崛起的办公交流应用Slack, ...
- Linux kernel 同步机制
Linux kernel同步机制(上篇) https://mp.weixin.qq.com/s/mosYi_W-Rp1-HgdtxUqSEgLinux kernel 同步机制(下篇) https:// ...
- Android LocationManagerService启动(一)
Location服务是系统中很重要的一个服务,几乎当前所有的App都会用到这个服务. 首先看代码在Android源码的位置 Android API frameworks/base/location L ...
- Java多线程--两种实现方式
进程概述: 在这之前,有必要了解一下什么是进程? 在一个操作系统中,每个独立的执行的程序都可称为一个进程,也就是"正在运行的程序".如图所示: 线程概述: 如上所述,每个运行的程序 ...
- LOJ10069 TREE
题目描述 原题来自:2012 年国家集训队互测 给你一个无向带权连通图,每条边是黑色或白色.让你求一棵最小权的恰好有 need 条白色边的生成树.题目保证有解. 输入格式 第一行 V,E,need 分 ...
- 单机模拟配置Eureka集群
首先先提醒单机部署的重要点 如果使用一个ip地址(适用于单网卡)每个eureka实例使用不同的域名映射到同一个IP 如果每个eureka实例使用不同的IP(多网卡),要确保这些IP要都表示本地 本文假 ...
- CF-559C Gerald and Giant Chess(计数DP)
给定一个 \(H*W\)的棋盘,棋盘上只有\(N\) 个格子是黑色的,其他格子都是白色的. 在棋盘左上角有一个卒,每一步可以向右或者向下移动一格,并且不能移动到黑色格子中.求这个卒从左上角移动到右下角 ...
- 【poj 2976】Dropping tests(算法效率--01分数规划 模版题+二分){附【转】01分数规划问题}
P.S.又是一个抽时间学了2个小时的新东西......讲解在上半部分,题解在下半部分. 先说一下转的原文:http://www.cnblogs.com/perseawe/archive/2012/05 ...
- F - To Add Which?
Description There is an integer sequence with N integers. You can use 1 unit of cost to increase any ...