我如何制作我的网站的移动网络版本？

Question

我当前正在使用的网站是这样：bedivere-gabriel.github.io/repository

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

[无论何时尝试通过手机访问它，我都会获得与桌面Web浏览器完全不同的风格。

我做了自己的研究，但仍然找不到我想要的。这就是问题所在，我不知道我到底需要什么，也不知道它叫什么，所以我不知道如何开始。

[我要解决的想法是Facebook如何为Facebook.com实现两个不同的链接：mobile.facebook.com和web.facebook.com

非常感谢您的时间和精力。我真的很感激。

Answer 1

我检查了您网站的源代码，此行为背后的原因是，您将body标签的样式设置为min-width: 1000px，这意味着无论您从哪个屏幕尺寸打开网站，它都会强制浏览器将您网站的宽度显示为1000px或更大。

要解决此问题，只需删除此行，并删除read more的CSS media queries，即可在不同的屏幕尺寸上获得所需的行为。

Answer 2

要为不同的设备使用不同的样式，您需要不同的样式表。

您可以使用CSS创建移动样式表。该链接将为您提供更多详细信息，并且我在下面添加了一个代码段，以显示放置样式表的位置：https://css-tricks.com/resolution-specific-stylesheets/

默认样式表：

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

希望这可以帮助您入门。

Answer 3

您需要检查CSS media-queries，它针对不同的屏幕尺寸，并且您必须为目标屏幕编写CSS。要查看更多信息，请点击Responsive CSS，您可以随时将其搜索出来或查看youtube视频。media queries，Responsive CSS等

Answer 4

您可以在标题中添加它：

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

您也可以，如果想要在设备上显示页面时使用更特定的样式，请使用CSS媒体查询：

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

参考：CSS Media Queries

编辑：

我在自己的一个网站项目中发现，我使用JQuery / javascript进行缩放以适合使用的移动设备上的表单：

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