如何利用html5开发android界面
4个回答
展开全部
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不包括导航栏，地址栏等完整浏览器功能，只用于显示一个网页。
（上）包括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不包括导航栏，地址栏等完整浏览器功能，只用于显示一个网页。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
单纯的使用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、社区繁荣
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
2016-07-12 · 百度知道合伙人官方认证企业
育知同创教育
1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】
向TA提问
关注
![]()
展开全部
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>
<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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
安卓有webview,跟访问网页一样，你只要写好的html5页面能够兼容各种安卓的屏幕尺寸就没问题，运行起来比原生的慢，苹果的会好些。
就是你写好页面，用客户端去调用访问你的页面就ok了。
就是你写好页面，用客户端去调用访问你的页面就ok了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
