平板电脑中的混合应用程序与移动UI相比会产生不同的结果

Question

我写了一个标题as shown here.
HTML

<div id="headDiv" role="banner">
            <div id="logoDiv">
                <span id="pageLogo"><img src="images/index_menu_active_phone.png" id="logo"></span>
            </div>
            <div id="pageTitle" class="container-fluid">
                <div class="center-block">
                    <img src="images/cart.png" class="img-rounded" alt="I" width="30" height="30" />
                    <span style="font-family: 'customfont';" id="inheader">Instore</span>
                </div>
            </div>
        </div>  

这在手机中非常有效。这如以下屏幕截图所示：

然而，如图所示，平板电脑看起来很奇怪：


我甚至无法在浏览器或jsfiddle中重现该错误。问题在哪里？
我不想使用媒体查询 修改
这个问题发生在三星手机和平板电脑上，但在联想手机，xiomi手机等其他手机中却没有......

Answer 1

所以我正在与我的客户会面，她同意允许我使用媒体查询。所以我使用了这样的媒体查询：

@media all and (max-width: 600px) and (orientation: portrait) {
    #searchMenu {
        position: absolute;
        top: 5.3%;
        z-index: 10;
        display: none;
        height: 80%;
        overflow-y: auto;
        padding: 0px;
        min-width: 250px;
        background-color: transparent;
    }
    #pageTitle {
        background-color: #FFA500;
        height: 50px;
        padding-top: 1%;
        display: flex;
        flex-flow: column;
        justify-content: center;
        padding-right: 22%;
        text-align: center;
    }
}  

这解决了它。但我觉得这是暂时的解决方案。其他答案也欢迎