如何利用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的中
html代码：

Exmaple</title> <br /> <meta name=”viewport” content=”width=device-width,user-scalable=no”/> <br /></head></span> <br />meta中viewport的属性如下：<br /><span style="font-size: x-small;"> <meta name="viewport" <br /> content=" <br /> height = [pixel_value | device-height] , <br /> width = [pixel_value | device-width ] , <br /> initial-scale = float_value , <br /> minimum-scale = float_value , <br /> maximum-scale = float_value , <br /> user-scalable = [yes | no] , <br /> target-densitydpi = [dpi_value | device-dpi | <br /> high-dpi | medium-dpi | low-dpi] <br /> " <br /> /><br /></span> <br />2 CSS控制设备密度<br /> 为每种密度创建独立的样式表（注意其中的webkit-device-pixel-ratio 3个数值对应3种分辨率）<br />html代码：<br /><link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" /> <br /><link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" /> <br /><link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.css" /> <br />3 JS控制<br /> Android浏览器和WebView支持查询当前设别密度的DOM特性<br /> window.devicePixelRatio 同样值有3个（0.75,1,1.5对应3种分辨率）<br /> JS中查询设备密度的方法<br />js代码：<br />if (window.devicePixelRatio == 1.5) { <br /> alert("This is a high-density screen"); <br />} else if (window.devicePixelRation == 0.75) { <br /> alert("This is a low-density screen"); <br />} <br />Android中构建HTML5应用<br /> 使用WebView控件与其他控件的使用方法相同在layout中使用一个<WebView>标签<br /> WebView不包括导航栏，地址栏等完整浏览器功能，只用于显示一个网页。 </div> <div class="tags"> </div> <div class="clear"> <div class="shares"> <b>声明：你问我答网所有作品（图文、音视频）均由用户自行上传分享，仅供网友学习交流。若您的权利被侵害，请联系fangmu6661024@163.com</b> <div id="share" class="share-component social-share" data-sites="weibo,qzone,qq,wechat"> </div> </div> <div class="act"> <a href="JavaScript:" onclick="zan('2269557858108326508')" class="zan" title="赞"> <i class="iconfont bx bx-like"></i> <span id="zan">0</span> </a> </div> </div> <div class="clear"></div> </div> <div class="ny-ad"> </div> <div class="ny-ad"> </div> <div class="like"> <h3 class="title">最新文章</h3> <div class="piclist likep"> <div class="li"> <div class="img"> <a href="https://w.sf024.com/info/942589595637809572.html" title="惠普（HP）LaserJet MFP M436n打印怎么总提示纸盘1没纸，纸盘2设置保存了也不打印，怎么设置"> <img src="https://w.sf024.com/assets/img/default.jpg" alt=""> </a> </div> <a href="https://w.sf024.com/ask/10" class="cat">科技 </a> <h3> <a href="https://w.sf024.com/info/942589595637809572.html" title="惠普（HP）LaserJet MFP M436n打印怎么总提示纸盘1没纸，纸盘2设置保存了也不打印，怎么设置">惠普（HP）LaserJet MFP M436n打印怎么总提示纸盘1没纸，纸盘2设置保存了也不打印，怎么设置</a> </h3> <div class="meta"> <span class="time"> <i class="iconfont bx bx-time"></i> 04-15 </span> <span class="views"> <i class="iconfont bx bx-show"></i> 2.5万阅读 </span> </div> </div> <div class="li"> <div class="img"> <a href="https://w.sf024.com/info/709929852732135965.html" title="如何做好把一个新产品推向市场"> <img src="https://w.sf024.com/assets/img/default.jpg" alt=""> </a> </div> <a href="https://w.sf024.com/ask/10" class="cat">科技 </a> <h3> <a href="https://w.sf024.com/info/709929852732135965.html" title="如何做好把一个新产品推向市场">如何做好把一个新产品推向市场</a> </h3> <div class="meta"> <span class="time"> <i class="iconfont bx bx-time"></i> 04-16 </span> <span class="views"> <i class="iconfont bx bx-show"></i> 86阅读 </span> </div> </div> <div class="li"> <div class="img"> <a href="https://w.sf024.com/info/1309089613027686979.html" title="西门子冰箱"> <img src="https://w.sf024.com/assets/img/default.jpg" alt=""> </a> </div> <a href="https://w.sf024.com/ask/10" class="cat">科技 </a> <h3> <a href="https://w.sf024.com/info/1309089613027686979.html" title="西门子冰箱">西门子冰箱</a> </h3> <div class="meta"> <span class="time"> <i class="iconfont bx bx-time"></i> 04-16 </span> <span class="views"> <i class="iconfont bx bx-show"></i> 112阅读 </span> </div> </div> <div class="clear"></div> </div> </div> <div class="ny-ad"> </div> </div> <div class="sidebar"> <div class="widget postlist"> <h3>猜你喜欢</h3> <ul class="hasimg"> <li> <a href="https://w.sf024.com/info/2269557858108326508.html" title="如何利用html5开发android界面" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="如何利用html5开发android界面"> </a> <a href="https://w.sf024.com/info/2269557858108326508.html" target="">如何利用html5开发andro...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 09-09 </span><span> <i class="iconfont bx bx-show"></i> 96阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/2141750826586042948.html" title="怎样用html5开发android app" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="怎样用html5开发android app"> </a> <a href="https://w.sf024.com/info/2141750826586042948.html" target="">怎样用html5开发andro...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 08-14 </span><span> <i class="iconfont bx bx-show"></i> 71阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/460373207746340925.html" title="如何利用HTML5和CSS3代码实现模糊滤镜" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="如何利用HTML5和CSS3代码实现模糊滤镜"> </a> <a href="https://w.sf024.com/info/460373207746340925.html" target="">如何利用HTML5和CSS3代码...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 10-27 </span><span> <i class="iconfont bx bx-show"></i> 100阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/754194870952085164.html" title="没有基础如何快速学习HTML5开发？" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="没有基础如何快速学习HTML5开发？"> </a> <a href="https://w.sf024.com/info/754194870952085164.html" target="">没有基础如何快速学习HTML5开...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 04-24 </span><span> <i class="iconfont bx bx-show"></i> 102阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/755027727431522804.html" title="没有基础如何快速学习HTML5开发？" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="没有基础如何快速学习HTML5开发？"> </a> <a href="https://w.sf024.com/info/755027727431522804.html" target="">没有基础如何快速学习HTML5开...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 04-24 </span><span> <i class="iconfont bx bx-show"></i> 110阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/751125549234717372.html" title="没有基础如何快速学习HTML5开发？" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="没有基础如何快速学习HTML5开发？"> </a> <a href="https://w.sf024.com/info/751125549234717372.html" target="">没有基础如何快速学习HTML5开...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 04-24 </span><span> <i class="iconfont bx bx-show"></i> 76阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/1176920607285361219.html" title="如何开发一个支持html5的app" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="如何开发一个支持html5的app"> </a> <a href="https://w.sf024.com/info/1176920607285361219.html" target="">如何开发一个支持html5的ap...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 05-30 </span><span> <i class="iconfont bx bx-show"></i> 86阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/1239402407596022379.html" title="如何开发一个简单的html5小游戏" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="如何开发一个简单的html5小游戏"> </a> <a href="https://w.sf024.com/info/1239402407596022379.html" target="">如何开发一个简单的html5小游...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 05-31 </span><span> <i class="iconfont bx bx-show"></i> 99阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/1696062334635655468.html" title="HTML5开发工程师的就业前景如何" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="HTML5开发工程师的就业前景如何"> </a> <a href="https://w.sf024.com/info/1696062334635655468.html" target="">HTML5开发工程师的就业前景如...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 05-04 </span><span> <i class="iconfont bx bx-show"></i> 32阅读 </span> </p> </li> <li> <a href="https://w.sf024.com/info/2011684843142750588.html" title="如何在移动设备上调试html5开发的网页" class="img"> <img src="https://w.sf024.com/assets/img/default.jpg" alt="如何在移动设备上调试html5开发的网页"> </a> <a href="https://w.sf024.com/info/2011684843142750588.html" target="">如何在移动设备上调试html5开...</a> <p class="meta"> <span> <i class="iconfont bx bx-time"></i> 06-01 </span><span> <i class="iconfont bx bx-show"></i> 109阅读 </span> </p> </li> </ul> </div> </div> </div> </section> <footer class="footer"> <div class="container"> <p class="copyright">COPYRIGHT 2013 - 2024 你问我答网®. ALL RIGHTS RESERVED. | <a href="https://beian.miit.gov.cn/" target="_blank">豫ICP备2020035127号</a></p> </div> </footer> <script> let search_type="1"; var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?752ceaa2e03e39366ceff9a414a1f6a7"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();</script> <script type="text/javascript" src="https://w.sf024.com/assets/js/jquery.share.min.js"></script> </body> </html>