时间戳

首页 > 解决方案 > 该网站在默认移动浏览器上没有响应

html - 该网站在默认移动浏览器上没有响应

问题描述

我有一个响应式网站，但是当我使用 Android 的一些默认浏览器访问它时，它看起来像照片中的样子：

在此处输入图像描述

而不是这样：

在此处输入图像描述

我认为问题出在显示比赛细节的大盒子的css（.game-content）。您可以检查网站以查看更多详细信息。谁能给我一个建议，告诉我如何解决这个问题，以确保网站在所有浏览器上看起来都一样？

盒子和边框的 CSS 代码（我认为它们是根本问题）：

.game-content {
    position: relative;
    background: #495057;
    height: 355px;
    font-size: 15px;
    margin-top: 20px;
    border-radius: 5px;
}
```
```
.game-border-right {
    border-right: 1px solid #fff;
    padding-top: 16px;
    height: 79px;
}

.game-odd1 {
    float: left;
    width: 30%;
    text-align: center;
}


.game-odd2 {
    float: left;
    width: 30%;
    text-align: center;
}

.game-tips {
    float: left;
    width: 30%;
    white-space: nowrap;
    text-align: center;
}
<div>
    <h3 class="match-heading">{!! $competition_heading !!}</h3>
    <div class="game-content user_info_box">
        <div class="game-top-content">
        <div class="user_info_modal_btn game-time float-left">
            <h6>{{ $match->hour }} GMT</h6>
        </div>
        <div class="game-icon float-right">
           
            <a href="#"class="toggle_in_my_picks" data-url="{{ route('my-picks-toggle', $match->id) }}">
                <i class="{{ $icon_class }} fa-heart wishlist-icon" aria-hidden="true"></i>
            </a>
        </div>
        </div>
        <div class="border-div"></div>
        <div class="user_info_modal_btn game-player-one-content">
            <div class="win-loss-div">
            </div>
            <h6>{{ $match->player_1->flashscore_name }}</h6>
        </div>
        <div class="user_info_modal_btn game-ratio">
            <h6>{{ $match->sets_player1 }}:{{ $match->sets_player2 }}</h6>
        </div>
        <div class="user_info_modal_btn game-player-two-content">
            <h6>{{ $match->player_2->flashscore_name }}</h6>
            <div class="win-loss-div">
               
            </div>
        </div>
        <div class="border-div-odd"></div>
        <div class="user_info_modal_btn game-odds">
            <div class="game-odd1 game-border-right">
                <h6>Odd1</h6>
                <p>{{ $match->odd1 }}</p>
            </div>
            <div class="game-odd2 game-border-right">
                <h6>Odd2</h6>
                <p>{{ $match->odd2 }}</p>
            </div>
            <div class="game-tips game-border-right">
                <h6>Tips</h6>
                <p>{{ $match->tips }}</p>
            </div>
            <div class="game-check-icon">
                {!! $match->prediction_icon !!}
            </div>
        </div>
    </div>
</div>

标签： htmlcss

解决方案

显式设置最小高度

（例如 - min-height: 20px;）

对于所有元素都可以解决此处描述的问题。

笔记：

  • 响应式设计仅适用于不同的屏幕宽度。
  • 它不会自动保证所有类型浏览器的一致视图。
  • 浏览器类型和屏幕高度超出了常规响应式设计的范围。
  • 使网站在不同浏览器或不同屏幕高度上保持一致需要额外的开发工作

推荐阅读