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

2054 阅读 3 评论 1 点赞

只使用的控件，只引用了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>

本文分类：帮助中心
本文标签：适应网页
浏览次数：2054 次浏览
发布日期：2023-05-10 14:14:46
本文链接：http://easybui.com/help/383.html

上一篇 > 请问如何打开一个网址
下一篇 > 为什么用loader.map声明多个模板后，不能加载摸的js

评论列表共有 3 条评论

王小o 2年前回复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 2年前回复TA

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

window.viewport = bui.viewport();

王小o 2年前回复TA

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

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

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

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

评论列表 共有 3 条评论

发表评论 取消回复

评论列表共有 3 条评论

发表评论取消回复