`
niunan
  • 浏览: 721109 次
  • 性别: Icon_minigender_1
  • 来自: 南宁
社区版块
存档分类
最新评论

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>

分享到:
评论

相关推荐

    mui文档离线版

    《mui文档离线版》包含了全面的mui框架的详细信息,是开发者在没有网络环境时进行移动端开发的重要参考资料。此离线版不仅提供了基础的框架介绍,还特别附带了一个关于CSS样式的类名说明文档,这对于深入理解和使用...

    mui.picker 手机版3d滑动选择日期

    mui.picker插件,文本框点击弹出 滑动选择日期(3D滑动选择年、月、日)

    mui框架手机网站模板

    在当今移动互联网时代,手机网站的开发愈发重要,而mui框架作为一款专为移动设备设计的前端框架,因其轻量级、高性能和丰富的组件库,深受开发者喜爱。本篇文章将深度探讨mui框架以及如何利用它来构建高效的手机网站...

    MUI做的手机购物网站的THML源码

    MUI(Mobile UI)是一个基于HTML5的开源前端框架,专为移动设备设计,尤其适合构建高性能的手机和 tablet 应用。MUI 拥有丰富的组件库,包括导航、表格、按钮、表单、网格系统等,使得开发者能够快速搭建具有原生...

    基于mui的版本更新方法

    基于mui的版本更新方法 :iOS安卓版本热更新、apk安装包下载

    mui漂亮的手机商城源码,手机商城网站源码,HTML

    《构建跨平台的MUI手机商城网站:源码解析与应用》 在移动互联网时代,电商平台已经成为商业领域不可或缺的一部分。为了适应多平台的用户需求,开发者们常常需要构建跨平台的移动商城应用。本篇文章将深入探讨一款...

    mui手机商城源码

    《基于mui的手机商城源码解析与应用》 在当今移动互联网时代,手机商城已经成为商业运营的重要组成部分。本文将深入探讨一款使用mui框架开发的手机商城源码,旨在帮助开发者理解其架构、功能以及如何在实际项目中...

    MUI手机购物网站HTML源码

    MUI是由DCloud(即海豚浏览器团队)开发的一款轻量级、高性能的前端框架,专为移动设备设计,尤其适合开发手机网页和混合移动应用。这个源码集成了购物首页、购物车和注册页等功能,提供了基本的电商网站架构,方便...

    hellomui_ready8s2_hellomui_mui_MUI前端源码_MUI源码_

    本文将围绕标题“hellomui_ready8s2_hellomui_mui_MUI前端源码_MUI源码”展开,深入剖析MUI的核心特性,通过`hellomui`源码包的解读,帮助读者快速理解和掌握MUI的使用。 首先,我们关注的是`ready8s2`这个标签,这...

    mui漂亮的手机商城源码

    【标题】"mui漂亮的手机商城源码"是一个基于MUI框架开发的移动应用商城模板,旨在为开发者提供一个美观、易用的手机购物平台开发基础。MUI是DCloud(多端云)推出的一款免费开源的前端框架,专门针对移动设备进行...

    MUI+jQuery手机端考试答题系统代码

    【MUI+jQuery手机端考试答题系统代码】是一款专为移动端设计的轻量级考试应用。这个系统利用了MUI框架的高效性能和jQuery库的便捷操作,为用户提供了流畅的答题体验。以下是对该系统关键知识点的详细解析: 1. **...

    基于mui的webapp版本更新方法 基于mui的版本更新方法 iOS热更新安卓版本

    Mui是一个专为微信小程序、H5页面以及Hybrid App设计的前端框架,它提供了丰富的组件和API,使得开发者能够快速构建跨平台的应用。本篇文章将详细探讨如何在基于Mui的Webapp中实现版本更新,包括iOS的热更新和...

    MUI手机wap商城模板

    "MUI手机wap商城模板"是一套专为移动Web应用设计的商城界面模板,它基于MUI框架构建,旨在提供高效、美观且用户友好的在线购物体验。MUI是中国阿里巴巴集团旗下的一个开源前端框架,它专注于移动端开发,尤其适用于...

    mui框架构建的手机版商城页面

    此资源为mui框架开发的手机购物商城,可直接拿来使用. 其中包含以下内容 首页:包含轮播以及分类快捷通道, 分类:横托式分类列表 购物车: 实现编辑删除与批量删除等操作 个人中心:订单信息, 售后信息,我的消息,地址管理...

    mui框架手机网页开发,包含登录、注册

    总结,通过MUI框架,开发者能够高效地构建出具有原生感的手机网页应用,特别是对于登录和注册这类常见的功能模块,MUI提供了完整的解决方案,使得开发过程更加顺畅。不断学习和掌握MUI的使用技巧,将有助于提升开发...

    mui.js和mui.min.js

    在上线前,记得替换为`mui.min.js`,以提高网站性能。同时,为了更好地利用MUI,开发者还需要熟悉MUI的API文档,理解各个组件的用法和配置选项,以便更高效地进行开发工作。 总的来说,MUI.js和mui.min.js是MUI框架...

    mui框架汽车美容维修4S店手机网站模板

    总结,这款基于mui框架的汽车美容维修4S店手机网站模板,以其蓝色调的专业设计和全面的功能布局,为4S店提供了一个高效的信息展示和用户互动平台。通过合理的结构设计和交互体验,不仅提升了品牌形象,也增强了用户...

    MUI【mui.min.css,mui.min.js,mui.ttf】

    MUI 是一个流行的前端开发框架,专为移动设备设计,尤其在中国开发者中广泛应用。这个压缩包包含三个核心文件:`mui.min.css`、`mui.min.js` 和 `mui.ttf`,它们是MUI框架的基本组成部分。 `mui.min.css` 是MUI的...

    HTML5+MUI实现手机app扫码功能

    HTML5+MUI实现手机app扫码功能是一种常见且实用的技术应用,主要应用于移动互联网场景,如电商、支付、社交等领域。HTML5作为现代网页开发的标准,提供了许多增强用户体验的新特性,而MUI则是一个轻量级的前端框架,...

    MUI手机app前端页面开发框架模板下载

    MUI是一款基于HTML5技术的移动端开发框架,它专为构建高性能、跨平台的移动应用而设计。MUI以其简洁的API、丰富的组件库和高度可定制性深受开发者喜爱。这款框架尤其适合快速开发手机应用的前端页面,提供了一套完整...

Global site tag (gtag.js) - Google Analytics