Question

我的页眉和页脚是互换的，因为它们出现在相反的位置。底部是头部，顶部是页脚。我不知道发生了什么，因为这是一个非常基本的问题。这是我的代码`

<head>
<title>kProduct Details</title>

<link rel="stylesheet" href="lib/responsiveSlides.css">
<link rel="stylesheet" href="lib/themes.css">
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />

<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.all.min.js"></script>
<script src="js/responsiveSlides.min.js"></script>

<style>
.k-grid-header-wrap {
    background: white;
}
.k-grid-header {
    padding:0!important;
}
.km-pane {
    margin:0;
}
</style>


<body>

    <div class="rslides_container" data-role="view" data-layout="default">

        <ul class="rslides centered-btns centered-btns1" id="slider1">
            <li id="centered-btns1_s0">
                <img src="img/men1.jpg" alt="">
            </li>
            <li id="centered-btns1_s0">
                <img src="img/men2.jpg" alt="">
            </li>
            <li id="centered-btns1_s0">
                <img src="img/men.jpg" alt="">
            </li>
        </ul>

    </div>

</body>

<section data-role="layout" data-id="default">

    <div data-role="header">
        <p>I am Header</p>
    </div>
    <!--View content will render here-->
    <div data-role="footer" style="background:grey">
        <p>My App</p>
    </div>


</section>

<script>
var app = new kendo.mobile.Application(document.body, {
    platform: 'android'
});



$("#slider1").responsiveSlides({
    auto: false,
    nav: true,
    namespace: "centered-btns"
});
</script>

</html>

此外，手机中的布局也不尽如人意。在浏览器中，只有一半的屏幕被占用，手机中的布局不合适 Browser Image Android Image `

Answer 1

这对我来说也是一件烦恼。作为iOS更新，剑道非常擅长跟上iOS样式的变化，但他们的Android样式基于Android Froyo或者超级老款。那时候，Android的一般样式指南是在底部放置常见的标题内容，以及顶部的标签条等内容。

Android的默认Kendo CSS会翻转页眉和页脚以适应这种情况。您可以通过包含此CSS将其恢复正常：

.km-android .km-view {
    -moz-box-direction: initial;
    -webkit-box-direction: initial;
    -ms-box-direction: initial;
    box-direction: initial;
}

我的一篇博客文章涵盖了此项目和其他剑道移动的怪异内容：Kendo Mobile Gotchas, Tips and Tricks。

页眉和页脚在KendoUi中互换

1 个答案: