我目前正在做的网站是这样的:bediere-gabriel.github.io/repository
您还可以检查其中的CSS和HTML行。
每当我试图在我的手机上到达它时,我会得到一个与我在桌面web浏览器中所做的非常不同的风格。
我自己做了调查,还是找不到我要找的。 这就是问题所在,我不知道我到底需要什么,也不知道它叫什么,所以我不知道怎么开始。
我想要解决的问题是Facebook如何为Facebook.com实现两个不同的链接:mobile.Facebook.com和web.Facebook.com
非常感谢您花时间和精力回答。 我会非常感激的。
我检查了你网站的源代码,这个行为背后的原因是你正在为你的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();
}