☰

如何让网站“感知手机”？

tag-icon • tag-icon web css html5 phone
如何让网站“感知手机”？

情况是这样的：我有一个完全编码的桌面版和手机版网站，但我不知道如何制作这个网站知道访问网站的设备是台式电脑或移动设备，因此它会相应地加载网站的任一版本。我该怎么做？我在 Web 开发方面还是个新手，所以我不知道。

提前致谢。

答案1

您声明您正在使用 Bootstrap 构建您的网站，因此您不应该有两个版本。您构建​​一个版本，然后使用 CSS 类指定要在各种屏幕尺寸下显示的元素。

引导程序文档关于如何使用网格系统在这种情况下是有帮助的。

要测试网站，你可以缩小浏览器的大小，元素将根据你设置的断点重新排序、调整大小或消失，或者你可以使用类似的服务浏览器堆栈它模拟各种浏览器。

答案2

此解决方案不需要 JavaScript，并且可以通过台式机、平板电脑和智能手机很好地运行。每个页面将只有一个文件，因此可以轻松进行更改、升级等。

首先，你需要在head每个html文件的部分上进行此项：

<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>

然后，您可以在 CSS 文件中制作能够适应不同屏幕尺寸的响应式设计。例如，在您的 css 文件中定义：

body {
    font-family: 'Arial', sans-serif;
    font-size:1em;
    color: #636770;
    margin: 0;
    padding: 0;
    height: 100%;
    background-image: url("/images/bg.png");
    background-repeat: repeat;
}

#top {
    display:block;
    width:100%;
    margin-top:40px;
    height: 147px;
    position: static;
}

@media (max-width:800px){


    #top {
        display:block;
        width:100%;
        margin-top:5px;
        position: static;
    }
}

在这个例子中，我们定义了body一个通用元素，它对每个屏幕尺寸都具有相同的属性，但#top在桌面上，它的上边距为 40 像素，当屏幕宽度在下面800像素上边距为5px。

相关内容