Question

我刚刚使用BootStrap创建了一个网站，我不知道为什么桌面版本会出现在移动设备上。可能出现这种情况的原因是什么？我确保在我的HTML文件中包含所有必需的BootStrap文件，包括＆＃39; Bootstrap.min.css，＆＃39; ＆＃39; Bootstrap.min.js，＆＃39;和jquery链接。这是site。提前谢谢。

<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel" data-slide-to="0" class="active"></li>
        <li data-target="#carousel" data-slide-to="1"></li>
        <li data-target="#carousel" data-slide-to="2"></li>
    </ol>
    <!-- Carousel items -->
    <div class="carousel-inner pull-right" >
        <div class="active item">

            <img src="" class="img-responsive pull-left">
       </div>
        <div class="item">
            <img src="" class="img-responsive pull-left">
        </div>
        <div class="item">
           <img src="" class="img-responsive pull-left">
        </div>
    </div>

Answer 1

您的网站中没有viewport元标记。加上这个：

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

为防止用户放大或缩小，请使用此锁定缩放（您应该这样做）：

<meta name="viewport" content="initial-scale=1, maximum-scale=1" />

更多信息：Using the viewport meta tag to control layout on mobile browsers。如果没有这个，现代手机将显示与桌面相同的布局。

Answer 2

如果您正在使用GoDaddy并为该域启用了“转发屏蔽”，则该网站将使用iFrame转发。这将使您的响应式移动网站在iPhone上显示为桌面版。这是一个很好的资源（博客），我发现可以告诉你如何使用AWS和GoDaddy作为托管服务提供商正确设置域名转发。

我的网站在移动版

2 个答案: