只使用的控件,只引用了css和2个JS 微信中打开,没有自动适应网页大小

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Flex Mech</title> 
    <link href="~/Content/css/bui.css" rel="stylesheet" />
    
</head>
<body >
     

 ----------


    [removed][removed]
    [removed][removed]    
</body>
</html>








点赞(0)

Comment list 共有 3 条评论

王小o 1 year ago 回复TA

经过排查,是head引入的顺序不规范导致的,先有meta viewport ,然后才是css


<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>BUI</title>
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no,viewport-fit=cover">
    <link href="css/bui.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
</head>

<body>

    <!-- BUI标准结构 -->
    <div class="bui-page bui-box-vertical">
        <header>
            <!-- 顶部固定内容 -->
            <div class="bui-bar">
                <div class="bui-bar-left">
                    <div class="bui-btn"><i class="icon-back"></i></div>
                </div>
                <div class="bui-bar-main">测试 首页</div>
                <div class="bui-bar-right"></div>
            </div>
        </header>
        <main>
            <!-- 中间滚动内容 -->

            <div class="bui-page">
                <ul class="bui-nav-icon bui-fluid-4 ">
                    <li class="bui-btn">
                        <div class="bui-icon primary round"><i class="icon-success"></i></div>
                        <div class="item-title"> 全员品质 </div>
                        <div class="item-text"> Total Quality Management </div>
                    </li>
                    <li class="bui-btn">
                        <div class="bui-icon round success"><i class="icon-success"></i></div>
                        <div class="item-title"> 标题文字 </div>
                        <div class="item-text"> 描述信息 </div>
                    </li>
                    <li class="bui-btn">
                        <div class="bui-icon round danger"><i class="icon-success"></i></div>
                        <div class="item-title"> 标题文字 </div>
                        <div class="item-text"> 描述信息 </div>
                    </li>
                    <li class="bui-btn">
                        <div class="bui-icon round warning"><i class="icon-success"></i></div>
                        <div class="item-title"> 标题文字 </div>
                        <div class="item-text"> 描述信息 </div>
                    </li>
                </ul>
            </div>

        </main>
        <footer>
            <!-- 底部固定内容 -->
        </footer>
    </div>

    <script src="js/zepto.js"></script>
    <script src="js/bui.js"></script>
    <script>
        // 多页开发: 一个页面必须要有一个 bui.ready, 且只能有一个
        bui.ready(function () {
            

        });
    </script>

</body>

</html>

王小o 1 year ago 回复TA

@王小o 建议直接使用官方的工程去测试,出现界面这个情况一定是不准确的。 也可以试试在底部的脚本加上这句执行。

window.viewport = bui.viewport();

王小o 1 year ago 回复TA

源码不完整,猜测问题在缺少资源引入, bui.css bui.js 都需要引入,且 首页 的 bui.ready 不能少。


bui.ready((global)=>{
})


订阅
更新

微信公众账号

微信扫一扫加关注

扫码
加群

BUI开发者交流群2

QQ扫码加群

扫码
体验

微信小程序

微信扫一扫体验

立即
投稿
发表
评论
返回
顶部