mui封装做好的手机版网站为apk

BOSS提到的一个功能,就是把已经做好的手机网站http://xxx.com/m/home/index ,想着看起来应该蛮简单,一个html页面里就一个iframe就好了,然后宽度和高度都设置为100%, 试了下,宽度没问题,就是高度的话100%是没有用的,试过在我的MX2手机上是可以100%撑开,钽是在同事的华为手机上又不能撑开了,上网搜索了一下,可以用JS来取得整个窗口的高度,下面是代码,直接写在MUI的新建 的项目中的INDEX.HTML页面就行了

<!DOCTYPE html>
<html>

<head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
        </style>
        <script type="text/javascript">
            document.addEventListener(‘plusready‘, function() {
                //console.log("所有plus api都应该在此事件发生后调用,否则会出现plus is undefined。"
            //    var h = plus.webview.currentWebview().height; 这是错的,取不到值
                //console.log("当前页面URL:" + plus.webview.currentWebview().getURL() + " ,当前窗口高度:" + h);

//    document.getElementById(‘frm1‘).style.height = h + "px";
            });

function setIframeHeight(iframe) {
                if(iframe) {
                    var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
                    if(iframeWin.document.body) {
                        iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
                        console.log("窗口高度:" + iframe.height);
                        document.getElementById(‘frm1‘).style.height = iframe.height + "px";
                    }
                }
            };

window.onload = function() {
                setIframeHeight(document.getElementById(‘frm1‘));
            };
        </script>
    </head>

<body>
        <iframe id="frm1" style="border:none;width:100%;height:100%;" src="http://baidu.com/"></iframe>
    </body>

</html>

原文地址:https://www.cnblogs.com/niunan/p/8413010.html

时间: 2024-11-06 21:37:46

mui封装做好的手机版网站为apk的相关文章

Android:刚6瓶啤酒4两56度白酒下肚,居然20分钟做了一手机版网站 !

刚6瓶啤酒4两56度白酒下肚,居然20分钟不到时间做了一手机版网站 !人有多大潜力你知道吗? 大家有兴趣的可以用手机或微信打开 http://xh.yunxunmi.com/ 看看俺这酒后之做! 更多0

刚6瓶啤酒4两56度白酒下肚,居然20分钟做了一手机版网站 !

刚6瓶啤酒4两56度白酒下肚,居然20分钟不到时间做了一手机版网站 !人有多大潜力你知道吗? 大家有兴趣的可以用手机或微信打开http://xh.yunxunmi.com/ 看看俺这酒后之做! 为了做新闻APP,我居然短短一个月利用业余时间做了:一个通用新闻采集器.一个新闻后台审核网站.一个通用采集器下载网站.一个新闻微网站.一个新闻APP 而且还给新闻微网站和新闻 APP练就了一指禅功力. 人生的价值和意义感觉真的有了! 采集器的开发非常痛苦,曾经有一有那么几天连续奋战到凌晨3,4点 微网站也

手机版WEB开发经验分享,手机版网站开发注意事项,网站自适应,手机版网站自适应,移动安卓APP自适应

转自 http://my.oschina.net/cart/blog/282477 做前端开发不短了,用过jQuery Mobile jqMobi 也纯手工写过.. 最后总结如下: jQuery Mobile:适合大而全,兼容性高,功能全,但是文件大,略显臃肿..如果你是网页版.手机版共用jquery库等 适合使用jQuery Mobile. jqMobi:适合单独就是手机版的站,体积小,速度快,但是兼容性没有jQuery Mobile好,功能没有jQuery Mobile全,但是一般也够用啦.

开发手机版网站有哪些前端框架?

ionic(强烈推荐,为serious web app而生) Framework7 ChocolateChip-UI Foundation jQuery Mobile Flat UI Theme jQuery Mobile Bootstrap Theme UIKit Kendo UI Mobile(大框架.下载使用免费,商业收费) GMU Famo.us(很有野心的前端框架,还在内测) Pure 开发手机版网站有哪些前端框架?

手机版网站顶部导航条的布局

效果图: 手机版网站顶部导航条布局分为3块:1.左侧返回上一页按钮(固定宽高)2.右侧菜单按钮(固定宽高)3.中间文字介绍(宽度自适应且文字居中) 要实现这个效果最简单的办法是2边绝对定位,中间text-align-center <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title&g

转:手机版网站中电话、手机号码添加链接

几年前我们开始为普通电脑版网站添加手机版本,当时查了一些资料,其中说到很多情况下,手机浏览器可以识别网页中的电话号码并自动添加链接,但也可以关闭这个功能并控制号码是否添加链接.这两年我们在添加手机版网站的时候,一般都没有去特别处理电话.手机号码的字段,就让手机浏览器自动来处理的. 但考虑到自动添加链接这个功能误识别的问题(例如:漏掉识别合适的电话号码或者把传真号码也添加上链接等),人工来控制添加链接也许是个更好的办法. 最近同事在全面排查网站问题的时候,又提出这个问题,我在网上搜索了一下,<Mo

自动跳转手机版网站代码

1 <!--移动端调转代码--> 2 <SCRIPT LANGUAGE = "JavaScript" > 3 function mobile_device_detect(url) { 4 var thisOS = navigator.platform; 5 var os = new Array("iPhone", "iPod", "iPad", "android", "No

JeeSite 4.0 彩38完整修复版+H5自适应手机版网站开发环境部署运行调试

环境要求 1.彩38完整源码下载+带H5自适应手机版下载 2.话仙源码论坛下载 3.Apache Maven 3.3+ 下载 4.MySql 5.7+ 下载 导入到Eclipse 1.检出JeeSite4源代码: git clone https://gitee.com/thinkgem/jeesite4.git 2.拷贝web文件夹,到你的工作目录(不包含中文和空格的目录)下,重命名为你的工程名,如:jeesite-demo 3.打开pom.xml文件,修改第13行,artifactId为你的工

今天我发现了一个网站有很多的html5手机wap网站模板,在这里分享一下

手机wap静态网页模版仿中国新闻网微官网 山东红十字会医院3g手机版网站模版 html制作***3G静态wap网站模版 html仿南通和美家***网站静态模版参考 3g手机网站模版仿广州曙光*** 3g手机网页模版仿北京航空466医院手机WAP站点 3G wap妇科医院网站模板仿北京艾丽斯妇科医院 3G手机静态模版仿杭州玛莉亚妇产医院wap下载 3G手机静态模版仿江门玛丽妇科医院手机网站 仿南都网新闻手机网站模板_wap手机端网站模板下载 环球新闻手机版wap网站模板 3G手机网站静态模版仿人民