Question

我很难将简单的剪切引导页面移动友好。我之前使用过bootstrap创建了网站，但无论出于什么原因，我都无法在这里告诉我我做错了什么。任何建议，使这更适合移动设备，我们将不胜感激。谢谢！

最终，我的问题是该页面在移动设备上呈现就好像它在台式机/笔记本电脑上一样。浏览器中的重新缩放越来越接近，但在使用真实设备进行测试时，它不是非常适合移动设备（在屏幕顶部呈现一个小方块）。

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <script src=
    "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js">
    </script>
    <script src=
    "https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>
    <link href=
    "https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css"
    rel="stylesheet">
    <script src=
    "https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js">
    </script>
    <style>
    .bodyStyle {
        background-color: black;
        color: white;
    }

    .contentBody {
        background-color: rgba(15,15,15,.8);
        margin-top: 75px;
        box-shadow: 0px 0px 200px 2px rgba(0,0,0,1);
        border: solid rgba(0,0,0,.3) 1px;

    }

    .indent {
        margin-left: 10px;
    }

    body {
        background-image: url();
        background-size: cover;
        min-height:100vh;
        min-width:100vw;
    }



    .table-hover > tbody :hover {
        color: black !important;
    }
    </style>
    </head>
    <body class="container bodyStyle">
    <form class="col-xs-12 col-md-8 col-md-offset-2 contentBody">
            <br>
            <h2></h2>
            <h6></h6>
            <div data-ng-controller="" style="height:100%; width:100%">
                    <h6>Blah Blah Blah, content.<br>
                    <br></h6>
                    <div>
                            <h6></h6>
                            <div class="">
                                    <h6></h6>
                                    <div class="col-xs-6">
                                            <h6><input class=
                                            "btn btn-info-outline" type=
                                            "button" value="7"></h6>
                                            <div class=
                                            "col-xs-6 input-group" style=
                                            "float:right">
                                                    <h6><input class=
                                                    "form-control col-xs-8"
                                                    style=" float: left;"
                                                    type="text">
                                                    <span class=
                                                    "input-group-btn"><input class="btn btn-info-outline"
                                                    style="float:left;"
                                                    type="button" value=
                                                    "8"></span><br>
                                                    <br></h6>
                                                    <div class=
                                                    "col-xs-12 input-group">
                                                    <h6>
                                                            <input class="form-control col-xs-6"
                                                            placeholder=""
                                                            type=
                                                            "text"></h6>
                                                            <div class=
                                                            "input-group-btn"
                                                            style=
                                                            "min-width:300px;">
                                                            <h6>
                                                            <select class="form-control">
                                                                    <option style="color:black; min-height: 25px;"
                                                                            value="">
                                                                            </option>
                                                                    </select></h6>
                                                                    <div>
                                                                            <h6>
                                                                            </h6>
                                                                            <div>
                                                                            <h6>
                                                                                    <br>
                                                                                    </h6>
                                                                            </div>
                                                                    </div>
                                                            </div>
                                                    </div>
                                            </div>
                                    </div>
                            </div>
                    </div>
            </div>...
            <table class="table table-hover"></table>
            <div>
                    <br>
                    <div>
                            <div class="col-xs-2">
                                    <div>
                                            <img src=""> <a><br></a>
                                    </div>
                            </div>
                    </div>
            </div>
            <div class="col-xs-12">
                    <div class="pull-right">
                            <input class="btn btn-info-outline" type=
                            "button" value="k">
                    </div><br>
                    <div class="col-xs-6">
                            <h2></h2><br>
                            <br>
                            <br>
                            <br>
                            <div>
                                    <b><br>
                                    <i></i></b>
                                    <div class="indent">
                                            <b><i></i></b>
                                    </div>
                            </div><b><br>
                            <span></span><br>
                            <span></span></b>
                    </div><b></b>
                    <div class="col-xs-6">
                            <b><img src="" style="max-height:200px;"></b>
                    </div><b></b>
            </div>
    </form>
    </body>
    </html>

Answer 1

请看the starter template。

您省略了元视口数据，因此移动浏览器假设您没有尝试适合移动设备，并且正在进行缩放，就好像它是桌面设计一样。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

不那么适合移动设备的引导页面

1 个答案: