如何利用html5开发android界面

Posted 2023-05-04

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何利用html5开发android界面相关的知识，希望对你有一定的参考价值。

H5开发安卓界面需要注意以下三点：
（上）包括Android设备多分辨率的问题，Android中构建HTML5应用程序基础
（中）包括Android与JS之间的互动，Android处理JS的警告对话框等，Android中的调试
（下）包括本地储存在Android中的应用，地理位置的应用，离线应用的构建
进入正题
● Android设备多分辨率的问题
Android浏览器默认预览模式浏览会缩小页面 WebView中则会以原始大小显示
Android浏览器和WebView默认为mdpi。hdpi相当于mdpi的1.5倍 ldpi相当于0.75倍
三种解决方式：1 viewport属性 2 CSS控制 3 JS控制
1 viewport属性放在HTML的<meta>中
html代码：

<span style="font-size: x-small;"> <head>
<title>Exmaple</title>
<meta name=”viewport” content=”width=device-width,user-scalable=no”/>
</head></span>
meta中viewport的属性如下：
<span style="font-size: x-small;"> <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] ,
target-densitydpi = [dpi_value | device-dpi |
high-dpi | medium-dpi | low-dpi]
"
/>
</span>
2 CSS控制设备密度
为每种密度创建独立的样式表（注意其中的webkit-device-pixel-ratio 3个数值对应3种分辨率）
html代码：

<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" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.css" />
3 JS控制
Android浏览器和WebView支持查询当前设别密度的DOM特性
window.devicePixelRatio 同样值有3个（0.75,1,1.5对应3种分辨率）
JS中查询设备密度的方法
js代码：
if (window.devicePixelRatio == 1.5)
alert("This is a high-density screen");
else if (window.devicePixelRation == 0.75)
alert("This is a low-density screen");

Android中构建HTML5应用
使用WebView控件与其他控件的使用方法相同在layout中使用一个<WebView>标签
WebView不包括导航栏，地址栏等完整浏览器功能，只用于显示一个网页。参考技术A

单纯的使用HTML5只能通过给Android应用添加webview控件来实现，其实质是在APP上嵌入一个网页浏览框来浏览html文件，如果想彻底的通过网页前端技术去开发Android界面，那么就应该使用react native。

React Native的出现

React Native的出现，似乎是扛起的反H5的旗子。就像当年Facebook放弃H5，全部转向Native一样。那么，React Native是否又是在吞食Native的领地呢？技术的发展，是用户风向标的导向起的作用。任何一门技术的出现，都是当时用户需求的体现。

React Native相比H5的优势

1、原生应用的用户体验

2、跨平台特性

3、开发人员单一技术栈

4、上手快，入门容易

5、社区繁荣

参考技术B 1 viewport属性放在HTML的<meta>中
<SPAN style="FONT-SIZE: x-small"> <head>
<title>Exmaple</title>
<meta name=”viewport” content=”width=device-width,user-scalable=no”/>
</head></SPAN>

meta中viewport的属性如下

<SPAN style="FONT-SIZE: x-small"> <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] ,
target-densitydpi = [dpi_value | device-dpi |
high-dpi | medium-dpi | low-dpi]
"
/></SPAN> 参考技术C 安卓有webview,跟访问网页一样，你只要写好的html5页面能够兼容各种安卓的屏幕尺寸就没问题，运行起来比原生的慢，苹果的会好些。
就是你写好页面，用客户端去调用访问你的页面就ok了。