提问者:小点点

我如何制作我的网站的移动网页版本? [已关闭]


我目前正在做的网站是这样的:bediere-gabriel.github.io/repository

您还可以检查其中的CSS和HTML行。

每当我试图在我的手机上到达它时,我会得到一个与我在桌面web浏览器中所做的非常不同的风格。

我自己做了调查,还是找不到我要找的。 这就是问题所在,我不知道我到底需要什么,也不知道它叫什么,所以我不知道怎么开始。

我想要解决的问题是Facebook如何为Facebook.com实现两个不同的链接:mobile.Facebook.com和web.Facebook.com

非常感谢您花时间和精力回答。 我会非常感激的。


共3个答案

匿名用户

我检查了你网站的源代码,这个行为背后的原因是你正在为你的body标签设置样式为min-width:1000px,这意味着不管你的网站是从什么屏幕大小打开的,它都会强制浏览器显示你网站的宽度为1000px或更大。

要解决此问题,只需删除这一行,并阅读有关CSS媒体查询的更多信息,以在不同屏幕大小上获得所需的行为。

匿名用户

为了使不同的设备具有不同的样式,您需要不同的样式表。

您可以使用CSS创建移动样式表。 这个链接将提供更多细节,我在下面添加了一段代码片段,显示将样式表放在哪里:https://cs-tricks.com/resolution-specific-stylesheets/

默认样式表:

<link rel="stylesheet" href="CSS/oddduckcomm.css" type="text/css">

希望这能让你开始。

匿名用户

您可以在标题中添加以下内容:

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

如果您希望页面在与设备一起查看时具有更特定的样式,还可以使用CSS媒体查询:

@media screen and (min-width: 480px) {
  body {
    ...
  }
}

引用:CSS媒体查询

编辑:

我在自己的一个网站项目中发现,我使用jQuery/JavaScript使表单的缩放适合移动设备,我使用:

var ww = $(window).width();
    var wh = $(window).height();
    if (ww <= 375 && wh < 812) {
        $("#formobilescreen").show();
    } else {
        $("#formobilescreen").hide();
    }